在Reactjs中組件之間進行交互的最佳方式是什麼？

我試圖從一個子組件攔截用戶活動，然後更新它的一個兄弟姐妹的狀態。例如在Reactjs中組件之間進行交互的最佳方式是什麼？

-RootApp 
--Child1 (has user interaction e.g. onClick) 
--Child2 (needs data from Child1 to update state)

我的解決方案（我覺得這相當不可思議）是我傳給Child1回調從RootApp。當用戶做onClick on child1回調被調用。回撥RootApp然後更新爲Child2定義的道具。 Child2被重新渲染。

我正在做這個對嗎？

來源

2014-10-16 Andy B

是的，父組件更新子組件的標準方式是將回調傳遞給子視圖。所以在你的情況下，'Child1'需要告訴'RootApp'在'Child1'中發生一些交互時改變它的狀態。將該狀態從'RootApp'傳遞給'Child2'，並且'Child2'將在其狀態變化的任何道具時重新呈現 – trekforever 2014-10-16 17:51:19

非常感謝。很高興看到我在正確的軌道上。 – 2014-10-17 08:30:59

感謝trekforever確認。回調是傳遞狀態的方式。

這是我做的（如題）：

-RootApp 
--Child1 (has user interaction e.g. onClick) 
--Child2 (needs data from Child1 to update state)

有從RootApp傳遞到Child1回調。當用戶點擊Child1時，回調被調用。 RootApp中的回調會更新爲Child2定義的道具。 Child2被重新渲染。

來源

2014-10-17 10:59:13

回調是要走的路，但是當您需要在根與子之間引入組件時，或者需要重構應用程序並重構UI時，它們可能變得非常麻煩。你可以看看Morearty.js，它使用單個不可變狀態數據結構來分離組件。因此，在child的onClick中，您只需更新狀態，而依賴該狀態部分的所有其他組件將自動重新呈現。有關更多詳細信息，請參閱介紹和API文檔。

當然，你仍然需要回調許多有效的情況，但其中許多都被消除。

來源

2014-10-21 05:43:31 Tvaroh

非常感謝！當然，如果我想在現有組件之間粘貼一個新組件，它會變得非常混亂！ – 2014-10-21 07:43:01

在Reactjs中組件之間進行交互的最佳方式是什麼？

回答

相關問題