我开始使用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
但它为空。我无法解决如何在点击按钮时向导航组件添加类以使导航栏可见?
答案 0 :(得分:1)
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;
这对你有用,我纠正的错误很少
答案 1 :(得分:0)
您的示例代码主要是因为错误,例如:
直接分配状态(不会调用渲染来更新您的应用程序)。您需要通过setState()调用来更新您的应用程序。
handleViewSidebar() {
this.state.sidebarOpen = !this.state.sidebarOpen;
}
应该是
handleViewSidebar() {
this.setState({sidebarOpen: !this.state.sidebarOpen});
}
并传递具有不同名称的道具,但使用初始名称。示例: sidebarOpen vs isOpen
你也不需要&#34; slideMenu&#34;因为您可以将handleViewSidebar作为道具传递,并直接从Header组件调用它。