与侧面菜单的React应用程序，并根据所选菜单显示组件

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

这是菜单

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

简单..您已经在顶级组件的状态中拥有按钮的名称，对吗？将其作为道具将其发送到薄膜，并在每个按钮上写下类似的内容。

在这里，我假设Menucomponent获取的道具的名称是名称

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