antd react Tabs组件自定义头部遍历

antd的React Tab组件允许你通过`tabBar`属性来自定义头部，包括遍历数据并动态生成Tab标签。`tabBar`应该是一个数组，每个元素可以包含`label`、`key`以及额外的配置项。如果你想遍历数据来创建Tab标签，你可以这样做：

import { Tab, Tabs } from 'antd';

const data = ['Tab 1', 'Tab 2', 'Tab 3']; // 这里是你需要遍历的数据

function CustomTabs() {
  return (
    <Tabs tabBarExtraContent={this.props.data.map((item, index) => (
      <div key={index}>
        <span>{item}</span>
        {/* 添加关闭按钮或其他个性化内容 */}
      </div>
    ))}
    tabBar={(props) => (
      <ul className="nav-tabs">
        {data.map((item, index) => (
          <li key={index} className={props.activeKey === item ? 'active' : ''}>
            <a href={`#${item}`}>{item}</a>
          </li>
        ))}
      </ul>
    )}>
      {data.map(item => (
        <Tab tabPaneKey={item} tab={item}>
          {/* Tab 内容 */}
        </Tab>
      ))}
    </Tabs>
  );
}

// 使用CustomTabs组件，传入你的数据
<CustomTabs data={yourDataArray} />

在这个例子中，我们首先在`tabBarExtraContent`中遍历数据生成静态标签，并在`tabBar`中处理点击事件。每个Tab的内容部分则由map函数内部生成。