在两个反应组件之间设置状态的正确方法

Question

我有一个用于Navbar 的组件和一个用于Sidebar 的组件。侧边栏组件有一个状态变量来决定它是否应该打开。这是我所拥有的。

export default class Sidebar extends Component {
  constructor() {
    super(...arguments);
    this.state = { open: false };
  }
  toggle() {
    this.setState({ open: !this.state.open });
  }
  render() {
    return (
      <LeftNav open={this.state.open}>
        <MenuItem
          onClick={this.toggle.bind(this)}
          primaryText="Close"
          leftIcon={<CloseIcon/>}
        />
      </LeftNav>
    )
  }
}

我遇到的问题是从单独的组件导航栏访问切换功能。

<AppBar
  title="Navbar"
  iconElementLeft={
    <IconButton onClick={}>  // want to enable clicking here to close sidebar component
      <MenuIcon>
    </IconButton>
  }
/>

我想知道的是，设置单独组件状态的最佳做法是什么？

Answer 1

您已进入令人兴奋的“数据流”领域。

实现这一点的一种方法是使用某种集中式对象来侦听事件并将信息分派给其他组件。换句话说，您的 NavBar 处理程序可以调度许多框架所称的带有一些信息的“动作”，然后其他组件可以根据来自该事件的信息重新呈现。

如果您喜欢此类事情的预打包解决方案，那么一个越来越受欢迎的库是redux。如果不出意外，它将帮助您深入了解其他人目前是如何做这类事情的。