反應通過狀態到兄弟組件

Question

const ChatBox = ({ messages, sendInput }) => { 
    <Card fluid className={theme} raised style={{ height: '100%' }}> 
     <ChatLog 
      messages={messages} 
     /> 

     <RecordInput // has internal recording state 
      sendInput={sendInput} 
     /> 
    </Card> 
} 

我的ChatBox包含ChatLog和RecordInput。

ChatLog包含要顯示的消息列表。

RecordInput是要發送到ChatLog的用戶語音錄製輸入。此組件具有內部recording狀態，該狀態可以是true或false。

我想將此recording狀態發送到ChatLog這是一個兄弟組件。

解決方法一：我可以讓ChatBox類成分與recording狀態，並傳遞到兩個ChatLog和RecordInput ..但我寧願不修改我的無功能無狀態組件..

是否有另一種方式來做到這個？也許redux或做某種克隆？

Answer 1

可以有多種選擇：

1. 使用終極版有一個全球性的狀態，因爲你已經提到。
2. 添加RecordInput類onRecordStatusChange道具將在每次狀態更改時在該組件內調用，並會告知父組件（Card）有關記錄的新狀態。這樣，您可以將記錄的狀態保存在父組件和子組件中，並且父組件可以將此數據傳遞給其他子組件（RecordInput組件的同級組件）。
3. 在RecordInput上使用ref來檢查該組件內部的記錄狀態（我不認爲這是您在這種特定情況下想要的，但您可以這樣做）。