Ant Design Tabs复用组件类型错误及TabPane使用疑问

DevOps 小满

2026-7-28

关于Ant Design Tabs组件的两个问题解答

问题1：新版Ant Design是否需要单独引入TabPane？

最新版Ant Design（v5及以上）里，TabPane已经集成在Tabs组件内部，无需单独引入。使用时有两种方式可选：

解构调用：const { TabPane } = Tabs;，之后直接用<TabPane />
嵌套调用：直接写<Tabs.TabPane />

问题2：修复Tabs组件的类型错误

你碰到的类型错误，是因为tabs属性的正确类型应为TabItemType数组，而非TabsProps数组。以下是修复后的完整代码：

import { Tabs } from "antd";
import type { TabsProps, TabItemType } from 'antd';

interface Props {
    defaultActiveKey?: string;   
    onChange?: TabsProps['onChange'];    
    tabs?: TabItemType[];
}

export default function TabView({ onChange, defaultActiveKey, tabs }: Props) {
    return (
        <Tabs 
            onChange={onChange}
            defaultActiveKey={defaultActiveKey}
            tabs={tabs}
        />    
    );
}

修复要点：

从antd导入TabItemType，这是Tabs组件tabs属性对应的标准数组元素类型
将Props中tabs的类型从TabsProps[]修改为TabItemType[]
把onChange的类型调整为TabsProps['onChange']，和Ant Design原生类型保持一致（原来的() => void类型太宽泛，不符合组件实际参数要求）
修正JSX中tabs={tabs}的位置，将其放在Tabs组件的属性列表内（原代码位置错误，会引发语法问题）