react+antd 选项卡切换
发布时间：2020-12-15 20:39:56 所属栏目：百科 来源：网络整理
导读：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: ? i
|
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:
?
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
