react+antd 選項卡切換

index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import CardSecond from './CardSecond';

import './index.css';

ReactDOM.render(

<div>

<CardSecond />

</div>,

document.getElementById('root')

);

 

 

CardSecond.js:

 

import React from 'react';

import 'antd/dist/antd.css';

import { Card } from 'antd';

const tabListNoTitle = [{

key: 'ha',

tab: 'haha',

}, {

key: 'hei',

tab: 'heihei',

}, {

key: 'he',

tab: 'hehe',

}, {

key: 'ke',

tab: 'keke',

}, {

key: 'de',

tab: 'dede',

}];

const contentListNoTitle = {

ha: <p>haha</p>,

hei: <p>heihei</p>,

he: <p>hehe</p>,

ke: <p>keke</p>,

de: <p>dede</p>,

};

class TabsCard extends React.Component {

state = {

noTitleKey: 'hei',

}

onTabChange = (key, type) => {

console.log(key, type);

this.setState({ [type]: key });

}

render() {

return (

<div>

<Card

style={{ width: '100%' }}

tabList={tabListNoTitle}

activeTabKey={this.state.noTitleKey}

onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}

>

{contentListNoTitle[this.state.noTitleKey]}

</Card>

</div>

);

}

}

export default TabsCard

 

 

 

#result: