一次更新多個組件的狀態

我有一個listview組件，它由一些子listitem組件組成。一次更新多個組件的狀態

每個孩子的listitem都有一個showSubMenu布爾狀態，它在列表項旁邊顯示一些額外的按鈕。

此狀態應更新以響應用戶事件，例如單擊組件DOM節點。

childcomponent：

_handleClick() { 
    ... mutate state 
    this.props.onClick() // call the onClick handler provided by the parent to update the state in parent 
}

但是，這感覺有點不對更新狀態等，它在不同的地方發生變異狀態。

另一種我認爲可以完成的方式是直接調用this.props.onClick，然後將子狀態作爲道具移動到父項中，然後改變狀態並將其作爲道具緩衝下來。

哪種方法（如果有的話）是慣用的還是可取的？

來源

2015-05-14 Tarlen

首先，我認爲這個問題的標題並沒有很好地描述你的疑問。更多關於國家應該去哪裏的問題。

React的theory表示您應該將狀態置於更高的組件中，您可以找到它作爲一組組件的單一來源。

對於你的應用程序每件狀態：

確定每個呈現基於該州一些組件。

找到一個公共所有者組件（一個組件，高於所有需要該層次中狀態的組件）。

普通所有者或層次結構中位於較高層的其他組件應該擁有狀態。

如果找不到可以擁有狀態的組件，請創建一個新組件，只是爲了保存該狀態並將其添加到公用所有者組件上方層次結構中的某個位置。

然而，在Facebook的said一個軟件工程師：

我們開始與拉需要爲子女的所有數據，並把它傳遞向下穿過道具大頂級組件。這導致中間組件中的大量粗俗和不相關的代碼。我們決定什麼，在大多數情況下，是聲明組件和獲取他們需要自己的數據...

當然，在談論從商店獲取的數據，但在一些什麼IM裝盤說案件的理論不是最好的選擇。

在這種情況下，我會說showSubMenu狀態只對列表項有意義，以顯示幾個按鈕，所以它是一個很好的選項將該狀態放在子組件中。我說的是一個很好的選擇，因爲是一個簡單的問題，一個簡單的解決方案，你提出一種具有類似this手段的另一種選擇：

var GroceryList = React.createClass({ 
    handleClick: function(i) { 
    console.log('You clicked: ' + this.props.items[i]); 
}, 

render: function() { 
    return (
    <div> 
     {this.props.items.map(function(item, i) { 
     return (
      <div onClick={this.handleClick.bind(this, i)} key={i}>{item} </div> 
     ); 
     }, this)} 
    </div> 
); 
} 
});

如果在未來，列表視圖必須得到承認的是狀態來顯示某些東西，例如狀態應該在父組件中。

但是，我認爲這是一條細線，你可以做wathever有道理在您的特定情況下，我在我的應用程序非常相似的情況下，這是一個簡單的例子，所以我就把狀態孩子。明天也許我必須改變它，並把狀態放在他的父母身上。

來源

2015-05-14 12:06:59 gabrielgiussi

一次更新多個組件的狀態

回答

相關問題