反應傳遞狀態給同級組件

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. 如前所述，使用redux具有全局狀態。
2. 向RecordInput類添加onRecordStatusChange道具，該道具將在每次更改狀態時在該組件中調用，它將通知父組件（ Card ）有關記錄的新狀態。 這樣，您可以將記錄的狀態保存在父組件和子組件中，並且父組件可以將此數據傳遞給其他子組件（ RecordInput組件的同級兄弟）。
3. 在RecordInput上使用ref來檢查該組件內部記錄的狀態（我不認為這是您在特定情況下想要的，但是您可以執行此操作）。