动态附加自定义组件进行响应

Question

我在“Tabs”和“Tab”中有两个组件。每个标签组件都会在标签中包含巨大的子组件或HTML元素，例如表单或表格，因此我们采用了这种标记方法，而不是将标签列表作为道具

 <tabs>
  <tab></tab>
  <tab></tab>
 </tabs>

现在我的问题是当用户点击按钮时如何向标签添加新标签。选项卡的内容只能由用户提及，我需要做的就是能够将它们添加到选项卡组件。

Answer 1

您可以拥有一个包含标签的数组。您附加要添加到阵列的新选项卡，它将显示添加的新选项卡。例如：

constructor (props) {
   super(props);
   this.state = { tabData: ['tab 1', 'tab 2'] };
}
render() {

   const { tabData } = this.state;

   <tabs>
      {tabData.map(element => <tab>{element}</tab>)}
   </tabs>
}

当您将新标签推送到tabData状态时，它将被添加并显示。