react 实现tab添加
React 实现动态添加 Tab 的方法
使用状态管理控制 Tab 列表
通过 useState 维护当前 Tab 列表和激活状态。初始化时可包含默认 Tab，后续通过按钮触发新增操作。
const [tabs, setTabs] = useState([{ id: 1, label: 'Tab 1' }]);
const [activeTab, setActiveTab] = useState(1);添加 Tab 的函数实现 创建函数生成新 Tab 的唯一 ID 和标签，更新状态数组。新 Tab 通常自动设置为激活状态。
const addTab = () => {
const newId = tabs.length > 0 ? Math.max(...tabs.map(tab => tab.id)) + 1 : 1;
setTabs([...tabs, { id: newId, label: `Tab ${newId}` }]);
setActiveTab(newId);
};渲染 Tab 头部和内容区域
使用 map 遍历渲染 Tab 标题，通过条件判断显示对应内容区域。点击标题切换激活状态。
<div className="tab-header">
{tabs.map(tab => (
<div
key={tab.id}
className={`tab-item ${activeTab === tab.id ? 'active' : ''}`}
onClick={() => setActiveTab(tab.id)}
>
{tab.label}
</div>
))}
<button onClick={addTab}>+</button>
</div>
<div className="tab-content">
{tabs.map(tab => (
activeTab === tab.id && <div key={tab.id}>Content {tab.id}</div>
))}
</div>可关闭 Tab 的扩展实现 如需支持关闭功能，可增加关闭按钮和对应的处理函数，注意处理关闭后激活 Tab 的切换逻辑。
const removeTab = (id) => {
const newTabs = tabs.filter(tab => tab.id !== id);
setTabs(newTabs);
if (activeTab === id) {
setActiveTab(newTabs[newTabs.length - 1]?.id || null);
}
};样式处理建议 使用 CSS 为激活态 Tab 添加高亮样式，通过 Flex 布局实现标题栏的水平排列，确保新增按钮视觉统一。
.tab-header {
display: flex;
gap: 8px;
}
.tab-item.active {
border-bottom: 2px solid #1890ff;
}性能优化考虑
当 Tab 数量较多时，可使用 useMemo 优化内容区域的渲染，避免不必要的计算。动态内容加载场景可结合懒加载技术。
