ReactJS，按钮onClick后更改页面内容

Question

我在更改页面内容时遇到问题。 我已经尝试了很多互联网提示。

要点：打开页面后，我想看到loadDepartment和一个按钮。如果我单击“emp”按钮。整页内容改为loadEmployees。我需要这个而不刷新页面。

componentDidMount() {
      return this.initializeContent("hie")
}

initializeContent(choose) {
      if(choose == "emp") {
          console.log("page choosed:", choose);
          return this.loadEmployees();
      }
      else if(choose == "hie") {
          console.log("page choosed:", choose);
          return this.loadDepartment();
      }
      else {
          console.log("not found user choice -", choose);
          return (<div>There is a problem with loading of hierarchy pagae</div>)
      }
  }
  
loadDepartment() {
  return (<div>apple</div>)
}
loadEmployees() {
  return (<div>orange</div>)
}
  
render() {
  return (<div>
        {this.componentDidMount()}
        <button className="userReq" data-name="emp" onClick={this.initializeContent.bind(this, "emp")}>blabla</button>
  </div>)
}

Answer 1

你需要切换组件的内部状态。 render() 函数是特殊的，返回值被 React 使用，但 loadEmployees() 函数没有相同的特殊状态。这是你应该做的事情：

var MyComponent = React.createClass({


      loadDepartment() {
        this.setState({
          view: "department"
        });
      },
      loadEmployees() {
        this.setState({
          view: "employees"
        });
      },

      render() {
        if (this.state.view === "employees") return <div>orange</div>;
        if (this.state.view === "department") return <div > apple </div>;
        return (<div>
          <button className = "userReq"
          data-name = "emp"
          onClick = { this.loadEmployees } >blabla </button> 
          </div>)
        }
      });

无论何时调用 setState()，组件都会自动重新渲染，它会使用 this.state 的新值来确定要渲染的内容。