React js工作流程，如何在父級別處理動態子級

我可能在此處缺少React的核心租戶，但在高層次上，我使用的是類似下面代碼的flex佈局（剝離了瀏覽器特定的flex變體簡潔）。我開始想我與概念結束了：React js工作流程，如何在父級別處理動態子級

body { 
     padding: 0; 
     margin: 0; 
    } 
    .box { 
     height: 100vh; 
     max-height: 100vh; 
     width: 80%; 
     margin: auto; 
     display: flex; 
     flex-direction: column; 
    } 
    .boxHeader, .boxFooter { 
     flex: 0 0 auto; 
    } 
    boxContent { 
     flex: 1 1 auto; 
     overflow-Y: auto; 
    }

我試圖得到一個基本的頁面佈局是這樣的：

<div className="box"> 
    <div className="boxHeader" id='coreHeader> 
    <HeaderComponentOne>Some Content - header is pseudo-fixed</HeaderComponentOne> 
    </div> 
    <div className="boxHeader id="dynamicHeader"> 
    <HeaderComponentTwo>Some Content - header is pseudo-fixed</HeaderComponentTwo> 
    </div> 
    <div className="boxContent> 
    {this.props.children} 
    </main> 
    <div className="boxFooter" id="dynamicFooter> 
    <FooterComponentOne>Some Content - footer is pseudo-fixed</FooterComponentOne> 
    </div> 
    <div className="boxFooter" id="coreFooter"> 
    <HeaderComponentTwo>Some Content - footer is pseudo-fixed</FooterComponentTwo> 
    </div> 
</div>

這是所有良好和作品 - 除了我需要動態頁眉頁腳來保持僞固定，但內容將根據當前子頁面動態提供。所以它幾乎就像我需要將孩子的道具傳遞給父佈局的動態頁眉和頁腳。我不在乎它是否最終成爲父母或孩子/孩子，但是如果其他周圍的div或元素卡在其中間，flex佈局將會窒息，因此「包裝器」似乎不是一種選擇。

這又是一個概念，我想結束了，並且幾乎可以接受任何讓我在那裏的東西。我甚至不確定接下來要做什麼才能獲得最終效果。我已經與幾個父母孩子的組合玩，試圖讓這個行爲像預期的一樣，花了幾個小時尋找類似的東西無濟於事。像這樣的事情甚至可以做到，如果是這樣，對如何最好地接近它的建議或想法是什麼？我也使用反應路由器是重要的。

Here是一個codepen，顯示了基本的需求，但問題是這些必須堆疊在一起，沒有多餘的React包裝div的混合，因爲這似乎扔flex。我還需要其中的兩個，有時候不會在頁面上，而且看起來也會混亂起來。

所以 - 本質上得到2個React動態頭組件 - 其中的第二個可能並不總是在那裏，一個或多個動態React內容組件根據需要進行滾動，以及兩個動態React頁腳組件 - 第一個可能不會總是在那裏表現得像碼盤。頁眉和頁腳是「固定的」和內容滾動。

我猜測必須有一些方法可以讓兩個人在一起很好，但也許不是，如果是的話，我還沒有弄明白。

TIA！

來源

2016-04-24 D Durham

對於我來說，這是不是很清楚你在這裏試圖完成什麼。「僞固定」是什麼意思？你能分享一張圖片或者你想要實現的功能嗎？ – wintvelt

使用flex時，元素與flex：0,0'固定'，但沒有像CSS那樣將位置設置爲固定。希望區分這一點，以避免回覆說將立場固定。我在顯示基本需求的問題中添加了一個codepen，但問題在於反應會添加額外的包裝div等，並且會拋出flex。 –

確實，每個反應組件只能渲染一個組件，因此每個反應組件至少需要一個包裝。但是你的結構已經手工編寫了所有<div>包裝，你不會這些。

爲了得到反應來呈現你想要的結構，你的根反應成分會使類似：

<div className="container"> 
    <HeaderComponentOne>Some Content</HeaderComponentOne> 
    <HeaderComponentTwo>Some Content</HeaderComponentTwo> 
    {this.props.children} 
    </main> 
    <FooterComponentOne>Some Content</FooterComponentOne> 
    <FooterComponentTwo>Some Content</FooterComponentTwo> 
</div>

每個子組件（<HeaderComponentOne> andsoforth，以及每個this.props.children）也只能渲染一個組件，可能呈現其他/多個子子組件。但是你的結構很好。
您只需將適用的classNames應用於每個組件即可。

您可以找到working react-based codepen here。

希望這會有所幫助！

來源

2016-04-25 20:28:54 wintvelt

謝謝......我一直非常喜歡這條路，但是我遇到的問題是讓道具傳遞給佈局中的各種組件，因爲它們通常由內容中的兒童驅動。我目前正在研究Redux作爲一種可能的解決方案，其中兒童可以更新redux狀態，然後佈局組件可以在渲染時讀取它。這看起來很像是讓一個（通常）簡單的佈局按預期工作。 –

那麼，如果頁眉和頁腳的佈局取決於兒童的某些道具，那麼您不應該將這些作爲道具傳遞給兒童，而應該傳遞給根組件。 – wintvelt

React js工作流程，如何在父級別處理動態子級

回答

相關問題