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

Question

我是ReactJS的新手，我想构建一个标签导航菜单。到目前为止，我已经安装了React-tabs，但我不确定如何根据数组示例创建自己的菜单标签。我希望有人可以帮助我。

这是我的代码sofar：

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>
  );
 }


}