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

Question

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

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

现在假设我使用在firstDiv中渲染一些html

React.render(firstComponent(null),document.getElementById('firstDiv');

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

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

Answer 1

这可以通过定期的父子通信来实现，除非在这种情况下您没有任何父级。

但是，您仍然可以将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"));

Js投标链接

---

在第二个组件内部调用React.render应该正常工作（可能在渲染阶段不会，但无论如何这都不是一个好主意）。然而，它在两个组件之间产生了巨大的耦合。

您还可以创建一个"根组件"，它将是这两个组件的父组件。

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

Answer 2

这个注释太长，无法放入注释中，所以我在这里把它取出来。

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

• 当firstComponent被呈现（挂载）时，您向存储（应用程序/域状态的容器）传递一个操作，以指示存储最初应该从服务器中提取数据。当数据可用时，Store将发出一个（change）事件，"嘿，我成功获取了数据，你可以来获取它"
• 您的两个组件都已经为存储设置了一个更改侦听器，因此当存储发出更改事件时，您的组件将通过调用存储上的getter（例如getState()）来请求新数据。这两个组件都将只呈现它们感兴趣的那部分数据
• 当在secondComponent中发生将改变应用程序状态的操作（比如onClick）时，此操作（web API事件）将触发Flux action（一种普通的旧JS助手方法），该操作将在Store修改状态时结束。（链中有一个调度员，我现在不谈论其他人）
  • 存储会将其初始状态更改为新状态，例如从Hello World更改为Hello, World! I'm updated
  • 一旦状态发生更改，存储将再次发出更改事件，第一个组件将相应地更新其状态