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

Question

假设我有 2 个不同的 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")) 吗？以及如何实现它们之间的双向通信？？？假设现在我单击 secondDiv 中呈现的 html 中的链接，然后如何更改 firstDiv 中的文本？？

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

Answer 1

这可以通过常规 parent-child communication 来实现，除非在这种情况下你没有任何 parent 。

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

JsFiddle link

---

在第二个组件内调用 React.render 应该正常工作(也许在渲染阶段不会，但这无论如何都不是一个好主意)。但是，它会在您的 2 个组件之间产生巨大的耦合。

您还可以创建一个“根组件”，作为这两个组件的父组件。

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