使用antd 的Tabs 如何动态的添加页面

Question

我现在想用react和antd实现一个传统的后台管理界面
上面是标题，左边是菜单，右边是tabs页签，点击左侧的菜单项就新开一个tab页，根据配置的菜单id或者js的相对路径 来动态的将指定的component加载到tab页面上。
根据antd的demo https://ant.design/components...
打开一个页面没问题。但是页面里面的内容如何动态加载我指定的react组件，
请老司机们提供以下解决思路。谢谢

Answer 1

这个是不是你想要的结果http://111.231.202.62:82

Answer 2

没有人回答，只能用这种方式了。
https://facebook.github.io/re...

Answer 3

webpack4 下有新的方法了

public onClickMenu(menu: any){
    let page = this.state.pages.find((p) => {
      return p.key === menu.key;
    })
    if (!page){
      import('../' + menu.url).then(component => {
        page = {
          key: menu.key,
          icon: menu.icon,
          title: menu.title,
          pageType: menu.pageType,
          url: menu.url,
          content: menu.content,
          Component: component.default
        }
        this.setState({
          pages: [...this.state.pages, page]
        })
        this.onChange(page.key);
      }).catch(e => {
        console.log(e)
      })
    }
    else{
      this.onChange(page.key);
    }
  }
<page.Component />

Answer 4

import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

ReactDOM.render(
  <Tabs defaultActiveKey="0" onChange={callback}>
    {
        arr.map((item, index) => {
            return <TabPane tab={"Tab " + index} key="index">Something</TabPane>
        })
    }
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
, mountNode);

arr是你的数组，可以动态增加或者重新赋值。

Answer 5

您好，最终是如何新增tab的时候动态引入组件了呢？

Answer 6

我是来找答案的 貌似TabPane 里面的必须是标签（引入的页面）否则无法展示 求大神支招