当前位置：首页 > React

react中如何使用antd中的tabs

2026-01-26 05:43:53React

安装 Ant Design

确保项目中已安装 Ant Design 及其依赖。通过 npm 或 yarn 安装：

npm install antd
# 或
yarn add antd

引入 Tabs 组件

在需要使用 Tabs 的组件中引入 Tabs 及其子组件 TabPane：

import { Tabs } from 'antd';
const { TabPane } = Tabs;

基本用法

通过 Tabs 包裹多个 TabPane 实现标签页切换。每个 TabPane 需指定 key 和 tab（标签名称）：

react中如何使用antd中的tabs

<Tabs defaultActiveKey="1">
  <TabPane tab="Tab 1" key="1">
    Content of Tab 1
  </TabPane>
  <TabPane tab="Tab 2" key="2">
    Content of Tab 2
  </TabPane>
</Tabs>

动态控制激活标签页

使用 activeKey 属性绑定状态变量，通过 onChange 回调动态切换：

const [activeKey, setActiveKey] = useState('1');
<Tabs activeKey={activeKey} onChange={(key) => setActiveKey(key)}>
  <TabPane tab="Tab 1" key="1">Content 1</TabPane>
  <TabPane tab="Tab 2" key="2">Content 2</TabPane>
</Tabs>

禁用标签页

为 TabPane 添加 disabled 属性可禁用特定标签：

react中如何使用antd中的tabs

<TabPane tab="Disabled Tab" key="3" disabled>
  Disabled Content
</TabPane>

自定义标签栏样式

通过 tabBarStyle 或 tabBarExtraContent 自定义样式或添加额外内容：

<Tabs tabBarStyle={{ background: '#f0f0f0' }}>
  <TabPane tab="Tab 1" key="1">Content</TabPane>
</Tabs>

响应式标签布局

设置 type 为 "card" 或 "line"（默认）调整标签样式：

<Tabs type="card">
  <TabPane tab="Card Tab" key="1">Card Content</TabPane>
</Tabs>

动态增减标签页

结合状态管理动态渲染 TabPane：

const [tabs, setTabs] = useState([{ key: '1', title: 'Tab 1', content: 'Content 1' }]);
<Tabs>
  {tabs.map(tab => (
    <TabPane tab={tab.title} key={tab.key}>{tab.content}</TabPane>
  ))}
</Tabs>