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组件中这样做：

    ...

    <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>

    ...

Answer 2

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