Reactjs 反应：如何调用Array.map中的组件？

我正在使用react工具箱和选项卡

我想制作一个如下的对象：

var Tabs = [
        {
            value: 0,
            label: 'First Tab',
            componentName : "MyAwesomeComponent"
        },
        {
            value: 1,
            label: 'Second Tab',
            componentName : "MyOtherAwesomeComponent"
        }
    ]

然后，在render的返回函数中

<Tabs index={this.state.tabs.index} onChange={this.tabs.handleChange}>
    {this.Tabs.map((item,index) => (
        <Tab label={item.label}>
              **** Here, i want to call {item.componentName} component. ***
        </Tab>
     ))}
</Tabs>

{this.Tabs.map（（项目，索引）=>(
****在这里，我想调用{item.componentName}组件***
))}

可以按名称调用组件吗

---

非常感谢。

您可以使用以下内容：

import MyAwesomeComponent from 'path/to/MyAwesomeComponent'
import MyOtherAwesomeComponent from 'path/to/MyOtherAwesomeComponent'

const myComponents = {
  'MyAwesomeComponent': MyAwesomeComponent,
  'MyOtherAwesomeComponent': MyOtherAwesomeComponent,
}

<Tabs index={this.state.tabs.index} onChange={this.tabs.handleChange}>
    {this.Tabs.map((item,index) => {
      const Component = myComponents[item.componentName]

      return (
        <Tab label={item.label}>
          <Component value={item.value} label={item.label} />
        </Tab>
      )
    })}
</Tabs>

从'path/to/MyAwesomeComponent'导入MyAwesomeComponent
从“path/to/MyOtherAwesomeComponent”导入MyOtherAwesomeComponent
常量myComponents={
“MyAwesomeComponent”：MyAwesomeComponent，
“MyOtherAwesomeComponent”：MyOtherAwesomeComponent，
}
{this.Tabs.map（（项目，索引）=>{
常量组件=myComponents[项.组件名称]
返回(
)
})}