在reactjs中沒有父子關系的不同組件之間進行通信

Question

假設我有2個不同的DOM元素

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

現在讓我說我在firstDiv中使用渲染一些html

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

現在可以說，我從firstComponent內部的服務器上獲取一些數據，然后我gotto渲染內secondDiv，部分數據最新最好的辦法做到這一點??我可以調用React.renderComponent（，的document.getElementById（“secondDiv”） ）從第一個組件內部？ 以及如何實現它們之間的雙向通信??? 讓我們說現在我點擊在secondDiv中呈現的html中的鏈接然后如何更改firstDiv內的文本？

如果我概括這個問題，它將是“如何在一個組件中的多個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"));

JsFiddle鏈接

---

在第二個組件內部調用React.render通常應該可以工作（可能不是在渲染階段期間，但這不是一個好主意）。 但是它會在兩個組件之間產生巨大的耦合。

您還可以創建一個“根組件”，它將是2個組件的父組件。

如果要同步許多組件，可以使用事件總線進行跨組件通信。

Answer 2

這個評論太長了，不適合評論，所以這就是為什么我把它拉出來。

我想你應該看一下Flux架構Facebook內部用來管理他們的React應用程序，現在是開源的。 在Flux內部，您的情況如下：

• 當呈現（裝載） firstComponent時，您將向存儲（ 應用程序/域狀態的容器 ）傳遞操作，以指示存儲應該最初從服務器提取數據。 當數據可用時，Store會發出（ 更改 ）事件， “嘿，我成功獲取數據，你可以來獲取它”
• 您的兩個組件都已經為商店設置了更改偵聽器，因此當商店發出更改事件時，您的組件將通過調用商店中的getter（例如getState() ）來請求新數據。 您的兩個組件都只會呈現數據的那部分，他們感興趣的是什么。
• 當在secondComponent發生一個會改變應用程序狀態的動作（例如onClick）時，此動作（Web API事件）將觸發Flux Action（一個普通的舊JS輔助方法），它將在Store中修改狀態。 （鏈中有一個調度員，其中我現在不討論）
  • 商店會把它的初始狀態改為新的狀態，比如從Hello World到Hello, World! I'm updated Hello, World! I'm updated 。
  • 狀態更改后，商店會再次發出更改事件，並且您的第一個組件會相應地更新其狀態。