Question

我有.container{ position:relative; display:inline-block; } .menu{ position:absolute; right:5rem; opacity:0; color:white; background:grey; display:inline-block; cursor:default; } .icon:hover + div{ opacity:1; } .item{ cursor:default; bottom:-1rem; }的组件和Navbar的组件。侧边栏组件有一个状态变量，用于决定是否应该打开它。这就是我所拥有的。

Sidebar

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

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

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

Answer 1

您已经进入了“数据流”的激动人心的领域。

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

如果您正在使用针对此类事物的预打包解决方案，那么获得一些受欢迎程度的库redux。如果不出意外，它将帮助您深入了解其他人目前是如何做这类事情的。

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

1 个答案: