兄弟の通信とレンダリング

Question

react/reduxアプリケーションでは、ヘッダーとコンテンツの2つの子コンポーネントをレンダリングするコンテナコンポーネントがあります。私の問題は、ヘッダーがコンテナのタイトルを表示する必要があるということです。しかし、このタイトルは実際にはコンテンツ部分によって定義されています。コンテナのrenderメソッドは次のようになります。

render() { 
    return (
     <div className='Container'> 
      <ContainerHeader /> 
      <div className='ContainerContent'> 
       {this.renderContent()} 
      </div> 
     </div> 
    ); 
} 

renderContent方法は、コンテナの状態に基づいて異なるコンポーネントをレンダリングし、各コンポーネントは、コンテナのタイトルはのようになりますどのようにロジックを定義します。例：特定のアイテムをレンダリングするコンテンツは、アイテムの名前をコンテナのタイトルに配置する必要があります。

おそらく私はこの問題を引き起こす誤解を抱いています。私の基本的な考え方は、コンテナがヘッダーとコンテンツに構造化されているため、これら2つの異なるコンポーネントを作成することでした。しかし、タイトルの定義はコンテンツに依存し、タイトルのレンダリングはヘッダーで行われます。

どのように達成できますか？たぶんReact refsを使うのでしょうか？またはここで階層概念を変更する必要がありますか？

Answer 1

おそらく、これをrefでどのように実現するかが考えられます。しかし、私は実際には、より洗練されたアプローチを取って、this.renderContentとレンダリングする前にタイトルを把握することをお勧めします。

だから、大体このような何か：

render() { 
    const title = this.getTitle(); 
    return (
     <div className='Container'> 
      <ContainerHeader title={title} /> 
      <div className='ContainerContent'> 
       {this.renderContent(title)} 
      </div> 
     </div> 
    ); 
} 

は、それがここに示されているようgetTitleのような関数にレベルをアップし、レンダリングされるべきタイトルを決定するロジックを抽出するために、あなたのケースでは可能ですか？