各个tab的问题

import React, { Component } from 'react'

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

import C1 from './c1/index'

import '@alifd/next/dist/next.css';

import { Tab } from '@alifd/next';

import 'antd/dist/antd.css';

const tabs = [

{ title: <Badge text={'3'}>First Tab</Badge> },

{ title: <Badge text={'今日(20)'}>Second Tab</Badge> },

{ title: <Badge dot>Third Tab</Badge> },

];

const tabs2 = [

{ title: 'First Tab', sub: '1' },

{ title: 'Second Tab', sub: '2' },

{ title: 'Third Tab', sub: '3' },

];

import antd from 'antd';

export default class index extends Component {

render() {

return (

<div>

<Tabs tabs={tabs}

usePaged={false}

initialPage={1}

onChange={(tab, index) => { console.log('onChange', index, tab); }}

onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}

>

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>

<C1 dataSource={1} />

</div>

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>

<C1 dataSource={2} />

</div>

<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>

<C1 dataSource={3} />

</div>

</Tabs>

<WhiteSpace />

<Tab>

<Tab.Item title="Home" key="1">

<C1 dataSource={4} />

</Tab.Item>

<Tab.Item title="Documentation" key="2">

<C1 dataSource={5} />

</Tab.Item>

<Tab.Item title="Help" key="3">

<C1 dataSource={6} />

</Tab.Item>

</Tab>

<antd.Tabs defaultActiveKey="1" >

<antd.Tabs.TabPane tab="Tab 1" key="1">

<C1 dataSource={7} />

</antd.Tabs.TabPane>

<antd.Tabs.TabPane tab="Tab 2" key="2">

<C1 dataSource={8} />

</antd.Tabs.TabPane>

<antd.Tabs.TabPane tab="Tab 3" key="3">

<C1 dataSource={9} />

</antd.Tabs.TabPane>

</antd.Tabs>

</div>

)

}

}