将状态传递给兄弟组件

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 ..但我宁愿不重构我的无功能无状态组件..

还有其他办法吗？也许还原或做某种克隆？

Answer 1

有多种选择：

1. 正如您已经提到的，使用redux具有全局状态。
2. 添加RecordInput类每次更改状态时将在该组件中调用的onRecordStatusChange prop，它将告诉父组件（Card）有关新状态的信息。录音。这样，您可以在父组件和子组件中保存记录的状态，父组件可以将此数据传递给其他子组件（RecordInput组件的兄弟组件）。
3. 使用ref上的RecordInput来检查该组件内部的录制状态（我认为在这种特定情况下你不想要这个，但你可以这样做）