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

我有一个页面上的员工列表。每个员工项目旁都有一个复选框。这是使用react js开发的。现在，每5秒钟，我需要根据员工的复选框状态来检查并显示页面上的多个员工可用/不可用状态。使用React.render（）呈现的两个组件之间是否可以进行交互？

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

<div id="status-bar">

能否请你告诉我怎么都的div可以彼此互动，因为我单独渲染他们：

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

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

来源

2015-11-03 Ramson

我不相信这两个组件可以在不使用父组件的情况下互相交互。我建议做一个包装了两下，像这样的组件（写在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模块中获取所需的信息，并将其设置为父模块的状态。在_countEmployees内调用setState将触发对render函数的调用，该函数将在StatusComponent上设置属性numEmployees，从而更新您的状态模块。

希望这会有所帮助

来源

2015-11-03 15:50:34 grammar

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

来源

2015-11-03 15:49:13 Errorpro

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

回答

相关问题