Reactjs：在主範圍之外改變道具

我做了一個測試，在的子組件中做了一個測試，並將一個道具傳給它。該應用程序的結構是這樣的：Reactjs：在主範圍之外改變道具

<App> 
    <Child /> 
</App>

然後在<Child />，我呈現<Outside />組件與另一React.render()。當我在Chrome檢查陣營螢火中，App結構是：

<App> 
    <Child /> 
</App> 
<Outside />

代替：

<App> 
    <Child /> 
    <Outside /> 
</App>

然而，從<App />傳遞{selected : true }狀態時，它顯示以及在<Outside />一個支柱，但是當我在<App />中對{ selected : false }進行狀態更改時，<Child />和<Outside />都不會收到更新後的道具。我認爲這是因爲<Outside />不在<App />範圍之內，所以數據流不流暢。（對不起，我的英語）

您可以檢查這裏的測試：http://jsbin.com/yazaqo/1/edit?js,console,output

我想要問的是：是否有任何其他的方式來更新組件是外的應用範圍是什麼？

來源

2015-04-26 Jihad Waspada

爲什麼不將新值傳遞給調用'Outside'上的'render'的代碼？你需要觸發第二棵樹的重新渲染。 – WiredPrairie

@WiredPrairie React.render（，div）;我如何設想通過新的價值？這是通過它的選擇= {this.props.selected} –

Child組件正在接收更新後的prop，它只是未被記錄到控制檯。

當組件接收到新的道具時，只有render和componentWillReceiveProps被調用，所以如果您將console.log移動到其中一種方法，您會看到更新後的值。

這也是爲什麼Outside沒有收到更新的道具。您正在將其渲染到componentDidMount中，該組件僅在掛載組件時調用一次。

它應該在Child的render方法中以相同的方式呈現在App組件中呈現的Child。另一種選擇是在componentWillReceiveProps中呈現它，儘管你可能會遇到一些這樣做的問題。

希望這會有所幫助。

來源

2015-04-27 01:27:09

哇，謝謝你的隊友，你激勵我。我用'componentDidUpdate（）'也試過了，檢測到改變後的道具。但實際上，我必須在''渲染方法之外呈現''的原因是我想用一些HTML DOM（本例中爲「div」）來包裝它，以便能夠將它傳遞給接受HTML的方法它的參數，如GoogleMap的'infowindow.setContent（）'。你有什麼想法如何處理這種情況？順便說一句，我想真正upvote你的答案，但我的聲譽告訴一切 –

Reactjs：在主範圍之外改變道具

回答

相關問題