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，并在每个按钮上写下类似的内容，

这里我假设MenuComponent获取的道具名称是名称

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

使用侧面菜单和基于所选菜单显示组件的应用程序

2 个答案: