ReactJS-將道具（狀態）傳遞給孩子的孩子

Question

我有一個快速的問題。 如何將狀態傳遞給孩子的孩子？

如果父級具有某種狀態，那么在ES6中將狀態傳遞給其直接子級而不是直接子級的最佳方法是什么？

我已經附上了布局的形象。

主應用程序-是由標題，側邊欄和內容區域組成的主要組件。

側邊欄包含-側邊欄項目。

內容區域由-內容項組成。

主要問題

如何單擊補充工具欄項來更新“ 內容區域”中的組件？

請注意，此布局有6個組件（應用程序，標題，側邊欄，內容區域，側邊欄項目，內容項）。

圖片

Answer 1

您可以執行此操作的唯一React方法是將狀態和道具從父級直接傳遞給子級。 如果孫子需要祖父母的狀態或道具，則父母必須保持向下傳遞狀態，直到到達孫子為止。 React是單向的； 從父母到孩子。

因此，在您的情況下，祖父母（主應用程序）將包含傳遞給子代的某些狀態（側邊欄和內容區域）。 例如，從父組件將狀態傳遞給孩子，如下所示：

<Sidebar someState={this.state.someParentState} />
<ContentArea someState={this.state.someParentState} />

當側邊欄中的狀態發生更改（在您的示例中為單擊）時，狀態將反映在祖父母（主應用程序）上。 由於同一狀態在多個組件（內容區域）之間共享，因此具有此狀態的每個組件都將被更新。

現在，如果您在想，“哇，如果有多個孩子，並且有孩子的孩子，這不會變得混亂嗎？”。 答案是：“可以，可以！” 這是狀態容器（Redux，Flux，MobX）進入的地方。這就是為什么要使用一個狀態容器的原因：

將狀態直接插入任何子級。 例如，它不必從父母到孩子，它可以從祖父母直接轉到孫子。 在Redux中，您只需使用connect和mapStateToProps函數將部分狀態作為道具連接到單個組件即可。
在大型應用程序中，狀態更易於維護和處理。 嘗試通過向下，向下，向下傳遞狀態來僅使用React創建Facebook。
將狀態與組件分離。 由於React是用於“構建UI界面”的，因此將狀態與表示分離是明智的。 對於簡單的情況，可以，但是隨着應用程序變得更加復雜，事實並非如此。

考慮以下有關Redux（最受歡迎的狀態容器）的資源：

Answer 2

如果您以更復雜的方式處理狀態，則值得考慮使用Redux在整個應用程序中處理狀態。

這樣，您可以使用“連接”將狀態映射到道具，並根據需要在組件之間傳遞狀態。 在這里查看有關如何實現它的更多信息。