如何实现Antd Tabs标题固定在Header组件、内容渲染在Content组件

核心思路是通过状态同步当前激活的标签key，隐藏Tabs组件自带的内容容器，仅保留标签导航头，再根据激活key在Content区域渲染对应内容。

具体步骤 #

1. 声明状态存储当前激活标签的key，默认值设为默认展示标签的对应key
2. 给Tabs组件绑定激活key和切换事件，隐藏其自带的内容渲染区域
3. 在Content区域根据当前激活的key，渲染对应标签的内容

完整代码示例 #

import { useState } from 'react';
import { Layout, Tabs } from 'antd';
const { TabPane } = Tabs;

// 定义各标签对应的内容组件
const Overview = () => <div>概览模块内容</div>;
const Alerts = () => <div>告警模块内容</div>;

// 标签与内容的映射表，后续新增标签只需在这里加配置即可
const tabMap = {
  '1': <Overview />,
  '2': <Alerts />
};

export default function ProfilePage() {
  // 激活标签状态，默认选中第一个标签
  const [activeTabKey, setActiveTabKey] = useState('1');

  return (
    <Layout className="site-layout">
      <HeaderComponent headerTitle="Profile">
        <Tabs 
          activeKey={activeTabKey} 
          onChange={setActiveTabKey}
          className="header-tabs"
        >
          <TabPane tab="Overview" key="1"></TabPane>
          <TabPane tab="Alerts" key="2"></TabPane>
        </Tabs>
      </HeaderComponent>
      <Content
        className="site-layout-background"
        style={{
          margin: "140px 16px",
          padding: 24,
          minHeight: 280,
        }}
      >
        {/* 根据激活key渲染对应内容 */}
        {tabMap[activeTabKey]}
      </Content>
    </Layout>
  );
}

添加对应CSS隐藏Tabs自带的内容：

.header-tabs .ant-tabs-content {
  display: none;
}

补充说明 #

如果不想额外加CSS，也可以直接使用Tabs的renderTabBar属性自定义渲染，只保留标签栏部分，效果完全一致。

内容的提问来源于stack exchange，提问作者lazyCoder