ReactJS、ボタンの後にページコンテンツを変更する

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（）関数は同じ特殊な状態を持ちません。ここでは、やるべき事のようなものです：あなたがSETSTATE（）を呼び出すたび

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>) 
 
     } 
 
     });

は、コンポーネントが自動的に再レン​​ダリングされますが、それが何を決定するためにthis.stateの新しい値を使用します。レンダリングする。