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

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

我遇到的问题是从一个单独的组件Navbar访问切换功能。

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

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

Answer 1

您已经进入了"数据流"这一激动人心的领域。

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

如果你对这类东西的预打包解决方案感兴趣，那么一个越来越受欢迎的库就是redux。如果没有别的，它将帮助你深入了解其他人目前是如何做这类事情的。