Javascript 如何动态创建选项卡菜单

我是ReactJS新手，我想构建一个选项卡导航菜单。到目前为止，我已经安装了，但我不知道如何基于数组示例创建自己的菜单选项卡。我希望有人能帮助我

这是我目前的代码：

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

export default class TabMenu extends React.Component {

constructor(props) {
    super(...arguments);

    let tabs = [
       { 'id': 1, 'name': 'Tab 1', 'url': '/' },
       { 'id': 2, 'name': 'Tab 2', 'url': '/' },
       { 'id': 3, 'name': 'Tab 3', 'url': '/' },
       { 'id': 4, 'name': 'Tab 4', 'url': '/' }
    ];

}

handleSelect(index, last) {
  console.log('Selected tab: ' + index + ', Last tab: ' + last);
}

render() {
  return (
    <div className='tabmenu'>

      <Tabs onSelect={this.handleSelect} selectedIndex={2}>
        <TabList>
          <Tab>Tab1</Tab>
          <Tab>Tab2</Tab>
          <Tab>Tab3</Tab>
        </TabList>

        <TabPanel>
          <p>blablahblah</p>
        </TabPanel>
        <TabPanel>
          <p>content blabla</p>
        </TabPanel>
        <TabPanel>
          <p>more content blahblah</p>
        </TabPanel>
      </Tabs>          
    </div>
  );
 }


}

从'react Tabs'导入{Tab，Tabs，TabList，TabPanel}；
导出默认类选项卡菜单扩展了React.Component{
建造师（道具）{
超级（…参数）；
设制表符=[
{'id'：1，'name'：'Tab 1'，'url'：'/'}，
{'id'：2，'name'：'Tab 2'，'url'：'/'}，
{'id'：3，'name'：'Tab 3'，'url'：'/'}，
{'id'：4，'name'：'Tab 4'，'url'：'/'}
];
}
handleSelect（索引，最后一个）{
log（'Selected tab:'+index+'，Last tab:'+Last'）；
}
render（）{
返回(
表1
表2
表3
布拉布拉赫

内容布拉布拉

更多内容布拉布拉布拉赫

);
}
}

您可以使用javascripts map为数组中的每个元素动态创建选项卡。以下是将选项卡视为渲染方法内部的可访问数组的示例

<TabList>
  { tabs.map(tab =>
    <Tab key={tab.id}>{tab.name}</Tab>,
  )}
</TabList>

{tabs.map（tab=>
{tab.name}，
)}