Javascript 在reactjs中没有父子关系的不同组件之间通信

假设我有两个不同的DOM元素

<div id="firstDiv">
</div>
<div id="secondDiv">
</div>

现在让我们假设我从第一个组件内的服务器获取一些数据，然后我要渲染secondDiv内的部分数据，最好的方法是什么？我可以从第一个组件内调用React.renderComponent（，document.getElementById（“secondDiv”）？？如何实现他们之间的双向沟通？？？假设现在我在第二个div中呈现的html中单击一个链接，那么如何更改第一个div中的文本

---

如果我概括这个问题，它将是“如何从单个组件在多个DOM元素中呈现html，然后在呈现在不同DOM元素中的这些组件之间进行通信？”

这可以通过常规方法实现，除非在这种情况下没有任何父级

但是您仍然可以将一些函数传递给根组件，这些函数将在2个组件内调用并触发渲染

下面是您询问的示例的工作演示：

var First = React.createClass({
    render: function() {
        return <div>Hello1 {this.props.name}</div>;
    }
});


var Second = React.createClass({
    render: function() {
        return <div onClick={this.props.onSecondClicked}>Hello2 {this.props.name}</div>;
    }
});

function onSecondClicked() {
    React.render(<First name="World updated!" />, document.getElementById("first"));
}

React.render(<First name="World" />, document.getElementById("first"));

React.render(<Second name="World" onSecondClicked={onSecondClicked}/>, document.getElementById("second"));

var First=React.createClass({
render:function（）{
返回Hello1{this.props.name}；
}
});
var Second=React.createClass({
render:function（）{
返回Hello2{this.props.name}；
}
});
函数onSecondClicked（）{
React.render（，document.getElementById（“第一”））；
}
React.render（，document.getElementById（“第一”））；
React.render（，document.getElementById（“第二”）；

---

在第二个组件内调用

React.render

应该正常工作（可能在渲染阶段不工作，但无论如何这不是一个好主意）。但是，它在两个组件之间创建了一个巨大的耦合

您还可以创建一个“根组件”，它将是这两个组件的父级

---

如果有很多组件需要同步，可以使用事件总线进行跨组件通信。

此注释太长，无法放入注释中，因此我将其拖到这里

我认为你应该看看Flux架构，Facebook内部使用什么来管理他们的React应用程序，现在它是开源的。在Flux内部，您的案例如下：

• 当呈现（装载）第一个组件时，您将向存储（应用程序/域状态的容器）传递一个操作，以指示存储应首先从服务器提取数据。当数据可用时，存储将发出（更改）事件，即“嘿，我成功获取了数据，您可以来获取它”
• 您的两个组件都已经为存储设置了更改侦听器，因此当存储发出更改事件时，您的组件将通过调用存储上的getter（例如

  getState（）

  ）来请求新数据。您的两个组件都只呈现它们感兴趣的那部分数据
• 当在

  secondComponent

  中发生一个动作（比如onClick）来改变应用程序的状态时，该动作（web API事件）将触发一个Flux动作（一个普通的旧JS助手方法），该动作将在修改状态的存储中结束。（链条中有一个调度员，我现在不想说的还有其他调度员）
  • 商店会将其初始状态更改为新状态，例如从

    Hello World

    更改为

    Hello，World！我已更新

  • 状态更改后，存储再次发出更改事件，第一个组件相应地更新其状态

---

这里有一个很好的阅读：@David:谢谢，网页的最后一段很有帮助-“对于没有父子关系的两个组件之间的通信，您可以设置自己的全局事件系统。在componentDidMount（）中订阅事件，在componentWillUnmount（）中取消订阅事件”，当您收到一个事件时，调用setState（）”KarthicRao提到的引号不在@David sent链接中。现在改成了。。。谢谢。。。。是的，正如您所提到的，当涉及很多组件时，同步变得很困难。您能告诉我如何为上述情况设置跨组件通信的事件总线吗？您可以轻松创建一个。事件总线只是一个具有

publishEvent

方法和侦听器数组的对象。您还可以使用开源和更高级的js总线，就像您的所有“根组件”都应该侦听事件总线并根据事件更改其反应状态一样，使用道具将此状态传播给他们的孩子。谢谢，将查看FLUX！也许对于这个简单的例子来说，Flux和Flux的样板文件似乎有点开销，但是当你的应用程序变得越来越大，变得越来越复杂时，Flux和单向数据流就会发光。

var First = React.createClass({
    render: function() {
        return <div>Hello1 {this.props.name}</div>;
    }
});


var Second = React.createClass({
    render: function() {
        return <div onClick={this.props.onSecondClicked}>Hello2 {this.props.name}</div>;
    }
});

function onSecondClicked() {
    React.render(<First name="World updated!" />, document.getElementById("first"));
}

React.render(<First name="World" />, document.getElementById("first"));

React.render(<Second name="World" onSecondClicked={onSecondClicked}/>, document.getElementById("second"));