React：在当前子组件返回 null 之前渲染另一个子组件？

Question

我不确定这是否可以实施。 我想创建一个新的选项卡组件，其中包含选项卡列表和选项卡面板。选项卡面板应该是另一个反应组件。

但它的最大计数为 3。 如：

我想要选项卡 1、选项卡 2

<div>
    <div className="tabList">
        <div>Tab 1</div>
        <div>Tab 2</div>
    </div>
    <div className="tabPanels">
        <div className="tabPanel">Component 1</div>
        <div className="tabPanel">Component 2</div>
    </div>
</div>

如果我想要选项卡 1,2,3,4,

<div>
    <div className="tabList">
        <div>Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div className="tabPanels">
        <div className="tabPanel">Component 1</div>
        <div className="tabPanel">Component 2</div>
        <div className="tabPanel">Component 3</div>
    </div>
</div>

但有时选项卡面板3根据数据可能会返回null， 那么我想要的是

<div>
    <div className="tabList">
        <div>Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div> // Not render this one
        <div>Tab 4</div>
    </div>
    <div className="tabPanels">
        <div className="tabPanel">Component 1</div>
        <div className="tabPanel">Component 2</div>
        <div className="tabPanel">Component 3</div> // Not render this one
        <div className="tabPanel">Component 4</div>
    </div>
</div>

我该怎么办？如果我不想在此选项卡组件（容器）中获取数据。 有没有办法在父组件渲染返回之前检查子组件是否渲染为空？

或者其他方式可以实现？

Answer 1

但有时选项卡面板3可能根据数据返回null

您可以根据数据有条件地渲染第三个和第四个元素。

<div>
    <div className="tabList">
        <div>Tab 1</div>
        <div>Tab 2</div>
        {data && <div>Tab 3</div>} // render only if data exists
        {!data && <div>Tab 4</div>} // render if data does not exists
    </div>
    <div className="tabPanels">
        <div className="tabPanel">Component 1</div>
        <div className="tabPanel">Component 2</div>
        {data && <div className="tabPanel">Component 3</div>}
        {!data && <div className="tabPanel">Component 4</div>}
    </div>
</div>