React JS：祖父母/孫子女之間的數據流

Question

我打算設置以下React組件

    <tab-box>
        <title>Example</title>
        <butons>
            <button id="actionID1"></button>
            <button id="actionID2"></button>
            <button id="actionID3"></button>
        </butons>
        <content>
            <tabList>
                <tab id="tab1" label="label1"></tab>
                <tab id="tab2" label="label2"></tab>
            </tabList>
        </content>
    </tab-box>

我想在其中提取tab每個label屬性，以便在實際內容的頂部設置導航欄。

問題是，如何從嵌套子項中提取屬性？ 或如何重組組件，以免出現此問題？

Thought1：使用全局商店服務，諸如“ tab填充“商店”，而掛載時父母可能會檢索它們

UPDATE，Thought2：使labels成為選項卡上的道具，但我仍然感覺不太正確。

Answer 1

有很多方法可以做到，但是我懷疑那是您最終想要的。 您希望父母獲得有關孩子的信息嗎？ 這在您試圖創建“組件”時沒有意義，而不是某些任務特定的代碼。

這樣想吧。 選項卡應使用選項卡組件顯示其自身的信息。 在什么情況下選項卡比其父項了解更多？ 如果是這樣，那它甚至是一個組成部分嗎？ 誰在使用誰？

React適用於數據從父級流到子級的一種方式，因此將信息保存在選項卡組件中並將信息傳遞給子選項卡更加有意義。

<tabs>
    <button text={tab[0].text}/>
    <tab>
        write transcluded children here
    </tab>
</tabs>

即使這樣也提出了一個問題-您為什么要使用這么多組件？ 為什么不像普通人一樣使用CSS類來表示選項卡容器和各個選項卡？

如果您堅持要制作制表符組件，則至少要將其全部保留在一個組件中，例如

<tabs data={[{title:"tab-title", content: (<p>stuff</p>)}]} />

另外，我絕對不同意在模型/商店中定義選項卡。 常識是UI和數據應該分開。

正如其他人提到的，您可以使用ref，但是我將其保留用於非常有限的目的，例如從表單中獲取字段。