Javascript 在导航中单击按钮时反应幻灯片

我开始和React一起工作，试着让我的头脑清醒过来。我目前正在尝试构建一个导航组件，当单击按钮时，该组件将滑入（按钮位于另一个组件中）

这是我到目前为止的代码

  class Application extends React.Component {

      constructor() {
        super();
        this.state = {
            sidebarOpen:false
        }
      }

      handleViewSidebar() {
          this.state.sidebarOpen = !this.state.sidebarOpen;
      }

      render() {
          return(
              <div>
                  <Navigation isOpen={this.state.sidebarOpen} toggleSidebar={this.handViewSidebar}/>
                  <Header isOpen={this.state.sidebarOpen} />
             </div>
           );
      }
    }

    class Header extends React.Component {
        constructor(props) {
           super(props);
           this.slideMenu = this.slideMenu.bind(this);
        }

        render() {
            return(
                <header>
                     <div className="container">
                         <h1><a>AppName</a></h1>
                         <div className="user__actions">
                             <a>Notifications</a>
                             <a onClick={this.slideMenu}>Menu</a>
                         </div>
                      </div>
                  </header>
            );
        }

        slideMenu() {
            this.setState({sidebarOpen:true});
            console.log(this.state);
        }
    }

    class Navigation extends React.Component {
        constructor(props) {
        super(props);
    }

    render() {
        return(
            <nav className={(this.props.sidebarOpen ? "site__navigation visible" : "site__navigation")}>
                <a>Friends</a>
                <a>Matches</a>
                <a>Messages</a>
                <a>Profile</a>
                <a>Search</a>
            </nav>
        )  
    }

}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
边栏栏：错
}
}
handleViewSidebar（）{
this.state.sidebarOpen=！this.state.sidebarOpen；
}
render（）{
返回(
);
}
}
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
this.slideMenu=this.slideMenu.bind（this）；
}
render（）{
返回(
AppName
通知
菜单
);
}
slideMenu（）{
this.setState（{sidebarOpen:true}）；
console.log（this.state）；
}
}
类导航扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
朋友
比赛
信息
轮廓
搜寻
)  
}
}
/*
*将上述组件渲染到div#应用程序中
*/
React.render（，document.getElementById（'app'））；

我发现一个

状态

通过我的所有组件？在我的

slideMenu

函数中，我控制台记录了这个.state，但它是空的。我不知道如何在单击按钮时将类添加到导航组件中，以使导航栏可见？

类应用程序扩展React.Component{
构造函数（）{
超级（）；
此.state={
边栏栏：错
}
}
handleViewSidebar（）{
this.setState（{sidebarOpen:！this.state.sidebarOpen}）；
}
render（）{
返回(
);
}
}
类头扩展了React.Component{
render（）{
返回(
AppName
通知
菜单
);
}
}
类导航扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
朋友
比赛
信息
轮廓
搜寻
)  
}
}

您的示例代码不起作用主要是因为一些小错误，例如：

直接指定状态（不会调用render来更新应用程序）。您需要通过setState（）调用更新应用程序

应该是

handleViewSidebar() {
    this.setState({sidebarOpen: !this.state.sidebarOpen});    
}

传递不同名称的道具，但使用它们的初始名称。示例：sidebarOpenvsisOpen

---

您也不需要“slideMenu”，因为您可以将handleViewSidebar作为道具传递，并直接从Header组件调用它。

非常感谢您的帮助，我关注这里发生的事情。然而，handleViewSidebar似乎根本没有被点击？只需复制粘贴我提供的相同代码，还可以在该函数中控制台一些东西，让我们知道它是否被调用。此外，如果为您工作或对您有所帮助，我很高兴谢谢，我在handleViewSidebar函数中添加了一个警报（“你好”）没有任何警报？完成后，它现在可以工作了，编辑代码，如果可以，请接受它以帮助其他人

handleViewSidebar() {
    this.setState({sidebarOpen: !this.state.sidebarOpen});    
}