React - 如何从另一个组件更改组件内的状态？

Question

这就是我想做的；我在 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 中的组件，谢谢。

Answer 1

根据您的代码，您似乎已经知道该怎么做。就举onSearchTermChanged个例子吧。在您的NavigationBar组件中这样做：&nbsp; &nbsp; ...&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <button onClick={this.props.onToggle}>Toggle</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; ...如果您的导航栏需要了解状态，您可以考虑添加额外的处理程序：&nbsp; constructor(props) {&nbsp; &nbsp; ...&nbsp; &nbsp; this.handleToggle = this.handleToggle.bind(this);&nbsp; }&nbsp; handleToggle() {&nbsp; &nbsp; this.setState({ toggled: !this.state.toggled });&nbsp; &nbsp; this.props.onToggle();&nbsp; }&nbsp; render() {&nbsp; &nbsp; ...&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <button onClick={this.handleToggle}>Toggle</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; ...&nbsp; }在您的应用程序组件中：&nbsp; &nbsp; ...&nbsp; &nbsp; <NavBar&nbsp; &nbsp; &nbsp; onSearchTermChanged={this.searchReturn}&nbsp; &nbsp; &nbsp; onToggle={this.toggleMainView} // <----&nbsp; &nbsp; &nbsp; styleOptions={this.state.style}&nbsp; &nbsp; &nbsp; showMainView={this.state.showMainView}&nbsp; &nbsp; &nbsp; featuresVisible={this.state.featuresVisible}&nbsp; &nbsp; ></NavBar>&nbsp; &nbsp; ...

Answer 2

要共享一个组件中的状态，您可以使用 HOC 或更高阶组件来实现这一点。