Javascript 独立文件中的React Ant设计选项卡

我在索引文件中有这个

import { Tabs } from 'antd'
import Tab1 from './Tab1'
import Tab2 from './Tab2'

<Tabs type="card">
 <Tab1/>
 <Tab2 />
</Tabs>

从“antd”导入{Tabs}
从“/Tab1”导入Tab1
从“/Tab2”导入Tab2

而Tab1.js是

import { Tabs } from 'antd'
const { TabPane } = Tabs
function Tab1(props){
return(
<TabPan tab="MyTab1" key=1>
new tab 1
</TabPan>

从“antd”导入{Tabs}
常量{TabPane}=Tabs
功能表1（道具）{
返回(
新标签1

而Tab2.js是

import { Tabs } from 'antd'
const { TabPane } = Tabs
function Tab2(props){
return(
<TabPan tab="MyTab2" key=2>
new tab 2
</TabPan>

从“antd”导入{Tabs}
常量{TabPane}=Tabs
功能选项卡2（道具）{
返回(
新标签2

它显示选项卡，但“选项卡”标题为空（不显示MyTab1和MyTab2）。 如果我把它们放在一个文件中，它就会显示它们

另一个问题是，当我在一个单独的文件中创建它们时，错误是

遇到两个具有相同密钥的子项，

null

请告知我应该如何将道具从选项卡发送到选项卡的更高级别，我认为这是问题所在