在兩個反應組件之間設置狀態的正確方法

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 。 如果沒有別的，它會幫助您了解其他人當前在做這種事情的方式。