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

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 。 如果没有别的，它会帮助您了解其他人当前在做这种事情的方式。