Ant design pro常用(9):Tabs的使用

在这里插入图片描述

import {Tabs} from 'antd';
class OperateComponent extends Component{
	render(){
		//设置destroyInactiveTabPane,不然会渲染多次(小于TabPane的长度)
		<div className="company_model">
				<div className="card-container">
					<Tabs
						 type="card" 
						 activeKey={this.state.activeKey} 
						 destroyInactiveTabPane
						 onChange={(activeKey)=>this.modelTabChange(activeKey)}>
								<TabPane tab='公司信息' key='company'>
                                            {
                                                !customerItem.company
                                                ?
                                                <CompanyEmpty />
                                                :
                                                <CompanyInfo companyInfo={companyInfo}/>
                                            }  
                                        </TabPane> 
                                        <TabPane tab='流量' key='traffic'> 
                                        			<CompanyEmpty />  		
                                        </TabPane>
                                        <TabPane tab='摄像头' key='camera'>
                                        		<CompanyEmpty /> 
                                         </TabPane>
                                         <TabPane tab='订单信息' key='order'>
                                            {
                                                        !customerItem.company
                                                        ?
                                                        <CompanyEmpty />
                                                        :
                                                        <OrderList owner={customerItem.company} type='single'/>
                                            }
                                                
                                        </TabPane>
				 </Tabs>			 					
				</div>
		</div>
	}
}

//TabPane要一个一个写出来,不能用方法调用return 出来,如果用方法调用出来
,每一个TabPane方法就会调用2次
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值