如何实现Ant Design Tab左侧两TabPane+右侧末尾TabPane布局

直接通过Ant Design Tabs组件的tabBarExtraContent属性结合状态控制就能实现需求，以下是具体实现代码和关键说明：

import { Tabs } from 'antd';
import { useState } from 'react';
import 'antd/dist/reset.css';

const { TabPane } = Tabs;

const CustomTabLayout = () => {
  // 管理当前选中的Tab Key
  const [activeKey, setActiveKey] = useState('1');

  // Tab切换通用处理函数
  const handleTabChange = (key) => {
    setActiveKey(key);
  };

  return (
    <Tabs
      activeKey={activeKey}
      onChange={handleTabChange}
      // 在Tab栏右侧插入自定义Tab元素
      tabBarExtraContent={
        <div 
          // 复用Ant Design的Tab样式类，选中时添加激活样式
          className={`ant-tabs-tab ${activeKey === '3' ? 'ant-tabs-tab-active' : ''}`}
          onClick={() => setActiveKey('3')}
          // 通过marginLeft:auto利用flex布局推到最右侧
          style={{ marginLeft: 'auto', cursor: 'pointer' }}
        >
          右侧Tab
        </div>
      }
    >
      {/* 左侧正常Tab */}
      <TabPane tab="左侧Tab1" key="1">
        左侧Tab1的内容区域
      </TabPane>
      <TabPane tab="左侧Tab2" key="2">
        左侧Tab2的内容区域
      </TabPane>
      {/* 右侧对应的TabPane，隐藏默认tab标签 */}
      <TabPane tab="" key="3">
        右侧Tab的内容区域
      </TabPane>
    </Tabs>
  );
};

export default CustomTabLayout;

关键实现细节： #

• 状态控制：用useState维护当前选中的Tab Key，统一控制左侧和右侧Tab的激活状态。
• 右侧Tab样式匹配：直接复用Ant Design内置的ant-tabs-tab和ant-tabs-tab-active样式类，保证和左侧Tab视觉一致。
• 布局定位：通过marginLeft: 'auto'借助flex布局特性，将右侧Tab自动推到Tab栏的最右端。
• 隐藏冗余标签：给右侧对应的TabPane设置空的tab属性，避免在左侧Tab列表中重复显示。

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