antd Tabs组件动态加载组件内容

您所在的位置：网站首页 › tabs组件的属性 › antd Tabs组件动态加载组件内容

antd Tabs组件动态加载组件内容

2023-10-18 11:52| 来源: 网络整理| 查看: 265

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 } }

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 => )}

【本文地址】

antd Tabs组件动态加载组件内容

antd Tabs组件动态加载组件内容

今日新闻

推荐新闻