react如何使用ant tabs组件

使用 Ant Design 的 Tabs 组件非常简单，只需要按照如下步骤即可：

1. 安装 Ant Design 组件库：在项目中安装 Ant Design 组件库，可以使用 npm 或 yarn 安装：

npm install antd --save
# 或者
yarn add antd

2. 引入样式文件：在项目的入口文件中引入 Ant Design 的样式文件，例如，在 `index.js` 文件中添加以下代码：

import "antd/dist/antd.css";

3. 使用 Tabs 组件：在需要使用 Tabs 的组件中引入并使用 Tabs 组件。例如，在组件中添加以下代码：

import React from "react";
import { Tabs } from "antd";

const { TabPane } = Tabs;

function MyComponent() {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane tab="Tab 1" key="1">
        Content of Tab Pane 1
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        Content of Tab Pane 2
      </TabPane>
      <TabPane tab="Tab 3" key="3">
        Content of Tab Pane 3
      </TabPane>
    </Tabs>
  );
}

在上面的代码中，我们首先引入了 Ant Design 的 Tabs 组件，然后在 `MyComponent` 组件中使用 Tabs 组件，传递了三个 `TabPane` 子组件，分别表示三个标签页，它们的标题和内容分别通过 `tab` 和 `key` 属性指定。

注意：在使用 Tabs 组件时，可以通过 `defaultActiveKey` 属性设置默认选中的标签页，也可以通过 `activeKey` 属性来控制选中的标签页。另外，Tabs 组件还提供了许多其他的属性和方法，可以根据实际需求进行定制。