antd Tabs組件動態加載組件內容

Tabs的TabPane子組件不支持通過屬性傳入Component，官方示例的TabPane內容也都只有簡單的文本。如果需要在TabPane的內容中動態傳入組件，可以利用jsx特性、采用封裝高階組件的方法實現，方法如下：

1、高階組件定義

class ToTabContent extends React.Component{
    constructor(props){
        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>
)}