選択したメニューに基づいてサイドメニューと表示コンポーネントを使って反応するアプリケーション

Question

ReactとJavascriptで開発するのはかなり新しいです。私はサイドメニューでアプリケーションをビルドしています。サイドメニューの選択に基づいて、さまざまなコンポーネントを表示したかったのです。誰かがこれを行う方法を私に導くことができますか？ここにメニューコンポーネントとインデックスコードを添付します。

class AppIndex extends Component { 
    constructor(props) { 
    super(props); 
     } 

    render() { 
    return (
     <Navbar /> 

      <div className="row"> 
       <div className="col-md-2"> 
        <MenuComponent/> 
       </div> 
       <div className="col-md-10"> 
        // I need to add the components here based on selected item in menu 
       </div> 
      </div> 
     ); 
     } 
    } 

class MenuComponent extends Component { 
constructor(props) { 
    super(props); 
} 

render() { 
    return (
     <ul className=" nav nav-pills mr-auto flex-column"> 
          <li className="nav-item"> 
           Overview 
          </li> 

          <li className="nav-item"> 
           Component1 
          </li> 

          <li className="nav-item"> 
           Component2 
          </li> 

          <li className="nav-item"> 
           Component3 
          </li> 

          <li className="nav-item"> 
           Component4 
          </li> 

          <li className="nav-item"> 
           Component5 
          </li> 
          </ul> 

      ); 
     } 
    } 

Answer 1

私はあなたのトップレベルのコンポーネントを見ていませんでした。

私の経験から、私はあなたに少しのアドバイスを与えたいです。子コンポーネントに別のコンポーネントを描画させないでください。可能な限り避けてください。

ここで私は何をしますか。

これはトップレベルのコンポーネント

class AppIndex extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { component: '' }; 
this.selectComponent = this.selectComponent.bind(this); // dont forget to bind 

      } 

selectComponent(event){ // this will take the name of the button thats beeing clicked and sets name of button to state 
event.preventDefault(); 

this.setState({component: event.target.name}); 
} 



render() { 
    let toRender = null; 

    switch(this.state.component) 
    { 
     case "component 1": 
     toRender = <Component1/> 

     case "component 2": 
     toRender = <Component2/> 

     case "component 3": 
     toRender = <Component3/> 

    } 

    return (
     <Navbar /> 

      <div className="row"> 
       <div className="col-md-2"> 
        <MenuComponent onClick = {this.selectComponent}/> 
       </div> 
       <div className="col-md-10"> 
        {toRender} //here goes the component 
       </div> 
      </div> 
     ); 
     } 
    } 

これはメニュー、それthatsの

const MenuComponent = ({onClick}) => { // you dont need a class component for this 
return (

    <ul className=" nav nav-pills mr-auto flex-column"> 
     <li className="nav-item">Overview</li> 

     <li className="nav-item"> <button onClick = {onClick} name = "component 1">Component1</button></li> 
     <li className="nav-item"> <button onClick = {onClick} name = "component 2">Component2</button></li> 
     <li className="nav-item"> <button onClick = {onClick} name = "component 3">Component3</button></li> 

    </ul> 

     ); 

}

です。

Answer 2

簡単に、トップレベルコンポーネントの状態の右にボタンの名前がありますか？ // reacttraining： MenuComponentはに、すべてのボタンの小道具は何かなどを書いてそれを送る、MenuComponentをが得る小道具の名前を想定し、ここで

イムは、名前

<li className="nav-item"> <button className = {this.props.name === "component 1"?"Active":""} onClick = {onClick} name = "component 1">Component1</button></li>