反应通过状态到兄弟组件

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来检查该组件内部的记录状态（我不认为这是您在这种特定情况下想要的，但您可以这样做）。