这就是我想做的；我在 App.js 中有几个组件，包括导航栏。目前，我在 App.js 中有一些代码，这些代码在单击按钮时隐藏了 App.js 中的多个组件，并同时显示不同的视图。我想做的是将按钮移动到导航栏，但仍然能够在 App.js 中切换视图。我应该如何在导航栏和 App.js 之间共享状态。这是我的导航栏代码；export default class NavBar extends React.Component { constructor(props) { super(props); }render() { let style = this.props.styleOptions; return ( <nav class="navbar fixed-top" style={{ backgroundColor: style.navBackground, borderColor: style.navBorderColor, }} > <div className="nav-brand-conainter" style={{ backgroundColor: style.navLogoBackground }} > <a class="navbar-brand" href="#"> <img src={style.logoUrl} alt="" /> </a> </div> <div className="navbar-contents"> <SearchBar onSearchTermChanged={this.props.onSearchTermChanged} style={{ color: style.secondaryTextColor }} ></SearchBar> </div> <UserBox></UserBox> </nav>);}}我希望能够从 NavBar 按钮隐藏 App.js 中的组件，谢谢。
2 回答
梵蒂冈之花
TA贡献1900条经验 获得超5个赞
根据您的代码，您似乎已经知道该怎么做。就举onSearchTermChanged个例子吧。
在您的NavigationBar组件中这样做：
...
<div>
<button onClick={this.props.onToggle}>Toggle</button>
</div>
...
如果您的导航栏需要了解状态，您可以考虑添加额外的处理程序：
constructor(props) {
...
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle() {
this.setState({ toggled: !this.state.toggled });
this.props.onToggle();
}
render() {
...
<div>
<button onClick={this.handleToggle}>Toggle</button>
</div>
...
}
在您的应用程序组件中：
...
<NavBar
onSearchTermChanged={this.searchReturn}
onToggle={this.toggleMainView} // <----
styleOptions={this.state.style}
showMainView={this.state.showMainView}
featuresVisible={this.state.featuresVisible}
></NavBar>
...
添加回答
举报
0/150
提交
取消