关于react antd的tab动态加载模块问题

关于react antd的tab动态加载模块问题

应要求要动态的加载Tab的内容

图片描述

相关代码如下

//方法
switchRoute = ({ selectedKeys }) => {

    const { dispatch, TabList } = this.props;
    dispatch(SwitchRoute(selectedKeys));
    let TabItem;
    if(selectedKeys[0]==='ResourcePlanPreserve'){
        TabItem={title: '资源计划维护', content:<ResourcePlanPreserve/>, key:'ResourcePlanPreserve'};
    }
    if (TabList.length) {
        if (TabList.filter(value => value.key === selectedKeys[0]).length) {
            dispatch(PublicActiveKey(selectedKeys[0]));
        } else {
            TabList.push(TabItem);
            dispatch(PublicActiveKey(TabList[TabList.length-1].key));
            dispatch(PublicTabAdd(TabList));
        }
        
    } else {
        TabList.push(TabItem);
        dispatch(PublicActiveKey(TabList[TabList.length-1].key));
        dispatch(PublicTabAdd(TabList));
    }  
};

// 这是主体
<Tabs

                activeKey={ActiveKey}
                onChange={this.onTabChange}
                type="editable-card"
                onEdit={this.onEdit}
                hideAdd={true}
            >
                {TabList&&TabList.map(pane => <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>{pane.content}</TabPane>)}
            </Tabs>

TabList的content得先定义成标签才能插入 有什么好的方法没有呢

阅读 3.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题