這可是沒有在reactjs

父子關係的不同組件之間的溝通可以說我有2個不同的DOM元素這可是沒有在reactjs

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

現在可以說，我渲染使用firstDiv裏面的一些HTML

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

現在我們可以說我從firstComponent中的服務器獲取一些數據，然後我得到部分數據渲染secondDiv，這是什麼最好的辦法呢？我可以打電話React.renderComponent（，document.getElementById（「secondDiv」）） from firstComponent？以及如何實現他們之間的雙向溝通？讓我們說，現在我點擊了第二個div中呈現的html鏈接，然後如何更改firstDiv中的文本？

如果我概括這個問題，它將是「我如何從一個單一組件呈現多個DOM元素內的html，然後通過這些組件呈現在不同的DOM元素???」

來源

2014-10-30 Karthic Rao

這是一個良好的閱讀：http://facebook.github.io/react/docs/multiple-components.html – David 2014-10-30 07:48:55

@大衛：謝謝你，在網頁中最後一段是有幫助的 - 「對於沒有父子關係的兩個組件之間的通信，您可以設置您自己的全局事件系統。在componentDidMount（）中訂閱事件，在componentWillUnmount（）中取消訂閱，並且當您收到事件時，請調用setState ）「 – 2014-10-30 14:44:25

KarthicRao提到的引用不在鏈接@David發送。它現在更改爲... http://facebook.github.io/react/tips/communicate-between-components.html – 2015-06-20 17:22:13

這可以通過定期parent-child communication來實現，除非在這種情況下您沒有任何父母。

但你仍然可以傳遞給根組件的一些功能將在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個組件的父項。

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

來源

2014-10-30 13:52:59

非常感謝....是的，正如你所提到的，當很多組件都是同步的時候它變得很難同步涉及。你能給我一些關於如何爲上述情況設置一個用於跨組件通信的事件總線的想法嗎？ – 2014-10-30 14:55:14

您可以輕鬆創建一個。事件總線只是一個具有'publishEvent'方法和一組監聽器的對象。你也可以使用一個開源的和更高級的js總線，比如https://github.com/postaljs/postal.js – 2014-10-30 16:02:02

你所有的「根組件」都應該監聽事件總線並根據事件改變它們的React狀態，用道具告訴他們的孩子。 – 2014-10-30 16:03:35

此評論太長，以至於無法放入評論中，所以這就是爲什麼我在這裏拉出來的原因。

我想你應該看看Flux體系結構Facebook在內部使用什麼來管理他們的React應用程序，哪些是現在開源的。內部產生磁通量，你的情況是如下：

時firstComponent呈現（安裝）你提供一個動作商店（爲您的應用程序/域狀態容器）來表示，這家店最初應拉來自服務器的數據。當數據是可用的商店會發出（變化）事件，這「哎，我成功地獲取數據，你可以過來拿」

無論您的組件已經成立了一個變化監聽器商店，所以當商店發佈變更事件時，您的組件將通過調用商店的獲取方（例如getState()）來要求新數據。當secondComponent相關操作（比如一個onClick），這將改變應用程序的狀態，這個動作（網絡API事件）既能您的組件將呈現數據，他們有興趣的只是一部分。

觸發一個Flux Action（一個普通的JS輔助方法），它將在Store中修改狀態。（有一個調度員在鏈中，其他我現在沒有說）

該商店會將其初始狀態更改爲新的狀態，比如從Hello World到Hello, World! I'm updated。

在狀態更改時，商店再次發出更改事件，並且您的第一個組件會相應地更新其狀態。

來源

2014-10-31 09:21:10

謝謝，請檢查FLUX！ – 2014-10-31 10:45:17

也許對於這個簡單的示例Flux和Flux的樣板文件看起來有點花銷，但是當您的應用程序變大並變得更加複雜時，Flux和單向數據流會發光。 – 2014-10-31 10:53:45

這可是沒有在reactjs

回答

相關問題