Question

我开始使用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'));

我发现一个state通过我的所有组件？在我的slideMenu函数中，控制台日志this.state但它为空。我无法解决如何在点击按钮时向导航组件添加类以使导航栏可见？

Answer 1

＆＃13;

 class Application extends React.Component {

      constructor() {
        super();
        this.state = {
            sidebarOpen:false
        }
      }

      handleViewSidebar() {
          this.setState({sidebarOpen:!this.state.sidebarOpen});
      }

      render() {
          return(
              <div>
                  <Navigation isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar.bind(this)}/>
                  <Header isOpen={this.state.sidebarOpen}  toggleSidebar={this.handleViewSidebar.bind(this)}/>
             </div>
           );
      }
    }

    class Header extends React.Component {

        render() {
            return(
                <header>
                     <div className="container">
                         <h1><a>AppName</a></h1>
                         <div className="user__actions">
                             <a>Notifications</a>
                             <a onClick={this.props.toggleSidebar}>Menu</a>
                         </div>
                      </div>
                  </header>
            );
        }

        
    }

    class Navigation extends React.Component {
        constructor(props) {
        super(props);
    }

    render() {
        return(
            <nav className={(this.props.isOpen === true ? "site__navigation visible" : "site__navigation")}>
                <a>Friends</a>
                <a>Matches</a>
                <a>Messages</a>
                <a>Profile</a>
                <a>Search</a>
            </nav>
        )  
    }

}

＆＃13;

这对你有用，我纠正的错误很少

Answer 2

您的示例代码主要是因为错误，例如：

直接分配状态（不会调用渲染来更新您的应用程序）。您需要通过setState（）调用来更新您的应用程序。

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

应该是

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

并传递具有不同名称的道具，但使用初始名称。示例： sidebarOpen vs isOpen

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

按钮单击时导航中的幻灯片

2 个答案: