React兄弟之間的溝通和呈現

在一個react/redux應用程序中，我有一個容器組件，它自己呈現兩個子組件：一個頭文件和一個內容部分。我的問題是，標題應呈現容器的標題。但是這個標題實際上是由內容部分定義的。容器的render方法看起來像這樣：React兄弟之間的溝通和呈現

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

的renderContent方法使得基於所述容器的狀態不同的部件和每個部件限定容器的標題如何應該像的邏輯。例如：呈現特定項目的內容應該將該項目的名稱放在容器標題中。

所以，也許我有一個誤解，導致這個問題。我的基本想法是容器被構造成標題和內容，所以我製作了這兩個不同的組件。但是定義標題取決於內容，並在標題中完成標題的完成。

這怎麼能實現？也許使用React參考？還是我必須在這裏改變層次結構的概念？

來源

2016-08-03 Michbeckable

有可能的方式，你可以如何實現這與參考。不過，我真的建議採取更清潔的方法，並找出標題，然後用this.renderContent進行渲染。

所以大致是這樣的：

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

是否有可能在你的情況下，提取該決定如下所示，其標題應呈現上升了一個層次到像getTitle功能的邏輯是什麼？

來源

2016-08-03 08:02:18 amann

目前我的實現是按照你的建議來做的。我在容器中具有標題邏輯，並通過標題組件中的道具進行設置。但是對於封裝來說，將標題從相應的內容組件注入到標題中會很好。沒有反應，我會在每個內容組件接口上設置一個getTitle（）函數。並將這個只給頭部組件。但那不是反應方式。組件生命週期使得在子組件之間進行互操作變得困難。 – Michbeckable

如果getTitle邏輯存在於內容組件中對您來說非常重要，那麼您可以將該邏輯放在內容的靜態方法中。這樣，您可以在創建實例之前從所有者類中調用它。 – amann

這是一個很好的觀點，但我不能使用靜態方法，因爲標題依賴於實例屬性，我無法在靜態方法中訪問this.props，可以嗎？ – Michbeckable

React兄弟之間的溝通和呈現

回答

相關問題