Javascript 基于动态数据的React选项卡式内容

我正在尝试构建一些选项卡式内容。当我像教程一样设置我的应用程序时，一切都很好。问题是我想用动态内容构建这些选项卡，有时一个或多个选项卡将没有任何内容，因此我尝试根据传入的数据生成选项卡

以下是我的尝试：

let tab1 = "Tab 1";
let tab2 = "Tab 2";
let tab3 = false;
let tab4 = "Tab 4";

class Gallery extends Component {
  render() {
    let tabs;

    if (tab1) {
      tabs += (
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
      );
    }
    if (tab2) {
      tabs += (
        <div label="Croc">
          After 'while, <em>Crocodile</em>!
        </div>
      );
    }
    if (tab3) {
      tabs += (
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
      );
    }
    if (tab4) {
      tabs += (
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
      );
    }
    return (
      // THIS WORKS
      <Tabs>
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
        <div label="Croc">
          After 'while, <em>Crocodile</em>!
        </div>
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
      </Tabs>

      // THIS DOESN'T
      // <Tabs>
      //   {tabs}
      // </Tabs>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Gallery />, rootElement);

让tab1=“tab1”；
设tab2=“tab2”；
设tab3=false；
设tab4=“tab4”；
类库扩展组件{
render（）{
让标签；
如果（表1）{
制表符+=(
再见，鳄鱼！
);
}
如果（表2）{
制表符+=(
过一会儿，鳄鱼！
);
}
如果（表3）{
制表符+=(
这里没什么可看的，这个标签不见了！
);
}
如果（表4）{
制表符+=(
再见，鳄鱼！
);
}
返回(
//这很有效
再见，鳄鱼！
过一会儿，鳄鱼！
这里没什么可看的，这个标签不见了！
//这并不重要
// 
//{tabs}
// 
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

如果注释掉Tabs组件中硬编码的子div，并取消注释我使用

Tabs

变量的子div，则可以看到有一个错误。错误是

TypeError:无法读取
Tabs/index.js的
第15行
上未定义的
的属性'label'，因此在设置
activeTab
状态之前似乎没有呈现子项。也许我在这件事上做错了。是否有更好的方法动态填充这些选项卡

请注意，在我的实际实现中，tab1/2/3实际上是JSON，我只是将它们硬编码为这个问题的变量。
您希望您的孩子是一个“数组”，因此仅仅连接JSX是不行的

您需要使用这些JSX元素创建一个数组，并作为子元素传入

类库扩展组件{
render（）{
设tabs=[]；
如果（表1）{
推(
再见，鳄鱼！
);
}
如果（表2）{
推(
过一会儿，鳄鱼！
);
}
如果（表3）{
推(
这里没什么可看的，这个标签不见了！
);
}
如果（表4）{
推(
再见，鳄鱼！
);
}
返回(
//这很有效
// 
//   
//再见，鳄鱼！
//   
//   
//过一会儿，鳄鱼！
//   
//   
//这里没什么可看的，这个标签不见了！
//   
// 
//这并不重要
{tabs}
);
}
}

工作沙盒-->
如果这对您有帮助，请不要忘记接受答案。
class Gallery extends Component {
  render() {
    let tabs = [];

    if (tab1) {
      tabs.push(
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
      );
    }
    if (tab2) {
      tabs.push(
        <div label="Croc">
          After 'while, <em>Crocodile</em>!
        </div>
      );
    }
    if (tab3) {
      tabs.push(
        <div label="Sarcosuchus">
          Nothing to see here, this tab is <em>extinct</em>!
        </div>
      );
    }
    if (tab4) {
      tabs.push(
        <div label="Gator">
          See ya later, <em>Alligator</em>!
        </div>
      );
    }
    return (
      // THIS WORKS
      // <Tabs>
      //   <div label="Gator">
      //     See ya later, <em>Alligator</em>!
      //   </div>
      //   <div label="Croc">
      //     After 'while, <em>Crocodile</em>!
      //   </div>
      //   <div label="Sarcosuchus">
      //     Nothing to see here, this tab is <em>extinct</em>!
      //   </div>
      // </Tabs>

      // THIS DOESN'T
      <Tabs>{tabs}</Tabs>
    );
  }
}