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这样的孩子填充商店，父母可以在挂载时检索它们

更新，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，但我会将其保留用于非常有限的目的，例如从表单中获取字段。