Question

我有一个页面中的员工列表。每个员工项目旁边都有一个复选框。这是使用react js开发的。现在，每隔5秒钟，我需要根据员工的复选框状态检查并显示页面上的许多员工可用/不可用状态。

<div id="container">  </div>

<div id="status-bar">

你能否告诉我两个div如何互相交流，因为我将它们分开渲染：

   React.render(<ListItems />, document.getElementById('container'));

   React.render(<StatusComponent />, document.getElementById('status-bar'));

Answer 1

我认为最好也更简单的方法 - 创建商店。您可以使用reduxJS轻松创建商店。您还可以在其他块中包含一个块，并通过this.props提供数据。

Answer 2

我不相信这两个组件可以在不使用父组件的情况下相互交互。我建议制作一个包装两者的组件，类似于这样的东西（用ES6编写，而不是在所有测试中......只是掀起了例子）：

class EmployeeModule extends React.component {

  _countEmployees() {
    // Magic to get employee count here..
    var count = getEmployeeCount();
    this.setState({numEmployees: count});
  }

  componentDidMount() {
    // Count employees every 5 seconds
    this.interval = window.setInterval(() => this._countEmployees(), 5000));
  }

  componentWillUnmount() {
    window.clearInterval(this.interval);
  }

  render() {
    return (
      <div className="employee-module-wrapper">
        <ListItems />
        <StatusComponent numEmployess="{this.state.numEmployees}" />
      </div>
    )
  }

}

有效的是，您需要EmployeeModule处理两个组件之间的交互。您可以从ListItems模块中获取所需的信息，并将其设置为父模块的状态。在setState内拨打_countEmployees会触发对render功能的调用，该功能会在numEmployees上设置属性StatusComponent，从而更新您的状态模块。< / p>

希望这有帮助

是否可以使用React.render（）呈现两个组件之间的交互？

2 个答案: