antdTabs组件动态加载组件内容
Tabs的TabPane⼦组件不⽀持通过属性传⼊Component，官⽅⽰例的TabPane内容也都只有简单的⽂本。如果需要在TabPane的内容中动态传⼊组件，可以利⽤jsx特性、采⽤封装⾼阶组件的⽅法实现，⽅法如下：
1、⾼阶组件定义
class ToTabContent extends React.Component{
constructor(props){
pane
super(props)
}
render(){
//通过传⼊的name属性动态得到⾃⼰需要注⼊的组件，MyComponent⾸字母要⼤写
const MyComponent = pages[this.props.name]
return <MyComponent {...this.props} />
}
}
2、state定义
this.state = {
panes : [{
key: 'pageA',
title: '页⾯A',
name: 'pageA'
},{
key: 'pageB',
title: '页⾯B',
name: 'pageB'
}]
}
3、根据state定义的内容渲染TabPane，TabPane内容为state中指定名字的组件
{ this.state.panes.map( pane =>
<TabPane tab={ pane.title } key={ pane.key }>
<ToTabContent name={pane.name} />
</TabPane>
)}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。