兄弟構成要素への反応通過状態

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に送信されるユーザの音声録音入力です。このコンポーネントの内部はで、trueまたはfalseとなります。

recordingの状態を兄弟コンポーネントのChatLogに送信します。

一つの解決策：私は

を行うための別の方法があります。.. recording状態で ChatBoxクラスコンポーネントを作成し、 ChatLogと RecordInputの両方にそれを渡す..しかし、私はむしろ私の無機能ステートレスなコンポーネントをリファクタリングしませんすることができこの？おそらく還元や何らかのクローニングをしていますか？

Answer 1

は、複数のオプションがあります：あなたはすでに述べたように

1. 使用reduxが、グローバルな状態を持っています。
2. RecordInputクラスにそのコンポーネント内でのステータスが変更されるたびに呼び出されますonRecordStatusChange小道具を追加し、それは記録の新しいステータスに関する親コンポーネント（Card）を教えてくれます。この方法で、親コンポーネントと子コンポーネントの両方で録画のステータスを保存できます。親コンポーネントはこのデータを他の子コンポーネント（RecordInputコンポーネントの兄弟）に渡すことができます。
3. RecordInputのrefを使用して、そのコンポーネントの内部の録音状況を確認します（これは、この特定の状況では望んでいないと思いますが、これを行うことができます）。