Javascript 设置状态选项卡

我试图在父组件状态下设置React组件的选项卡，类似这样

从“React”导入React；
从“../myChildComponents/Component1”导入组件1；
从“../myChildComponents/Component2”导入组件2；
从“../myChildComponents/Component3”导入Component3；
类ParentComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
选项卡：[
{id:'1'，text:'Tab 1'，component:Component1}，
{id:'2'，text:'Tab 2'，component:Component2}，
{id:'3'，text:'Tab 3'，component:Component3}，
]
}
}
render（）{
返回(
{
this.state.tabs.map（（t，i）=>
)
}
)
}
}

是的，你可以使用这样的组件

 render() {
    return (
      <!-- All the other stuff goes here, like the tabs headers -->
      <TabContent>
      {
        this.state.tabs.map((t, i) => 
          <TabPane key={i} tabId={t.tabId}>
            <t.component {...t.data}/>
          </TabPane>
        )
      }
      </TabContent>
    )
  }

render（）{
返回(
{
this.state.tabs.map（（t，i）=>
)
}
)
}

您唯一需要更改的是：

• 您的对象键是

  组件

  ；小写
• 您需要使用

  t.data

  对象上的spread操作符设置道具：

  {…t.data}

---

好吧，我试着这样做，使用花括号，或将预期组件四舍五入为renderes，我得到了

Uncaught（承诺）不变冲突：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。您可能忘记了从定义组件的文件中导出组件。检查呈现方法

，不使用卷曲背景（

{id:'1'，text:'Tab 1'，component:component1，data:{props.data1}}}

）获得

未捕获（承诺中）不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但获得：未定义。您可能忘记了从定义组件的文件中导出组件。检查渲染方法

@CJLopez移除

{props.data1}

，data2和data3等周围的花括号。它应该是

{id:'1'，text:'Tab 1'，component:{component1}，data:props.data1}

aaaa和。。。出乎意料的是，它开始像你提到的那样工作了。把你的答案标为正确答案。谢谢