Reactjs 带有React.js和Ant设计的动态选项卡

我想知道是否可以在React.js和Ant Design中从侧菜单和选项卡页面打开新选项卡。如果是的话，你能告诉我怎么做吗

这是我的密码。 当我从该页面添加新选项卡时，它可以工作，但当我从另一个页面尝试时，列表有新项，但不会呈现它

export default class AppPages extends React.Component {
constructor(props) {
    super(props);

    const list = [{ title: "Home", content: <Home />, key: '1' }]
    this.state = {
        list,
        activeKey: list[0].key,
        newTabIndex: 0,
    };
}

导出默认类AppPages.Component{
建造师（道具）{
超级（道具）；
const list=[{title:“Home”，content:，key:'1'}]
此.state={
列表
activeKey:列表[0]。键，
新指数：0，
};
}

添加新选项卡的功能：

AddTab(title, content) {
    debugger;
    var listCopy = this.state.list
    const activeKey = `newTab${this.state.newTabIndex++}`;
    var obj = { title: title, content: content, key: activeKey };
    listCopy.push(obj);
    this.setState({
        list: listCopy
    })
}

onChange = (activeKey) => {
    this.setState({
        activeKey: activeKey
    });
};
render() {
    return (
        <>
            <Layout>
                <Sider className="sidemenu">
                    <div>
                        Side Menubar <br />
                        <br />
                        <div>
                            <Button onClick={() => { this.AddTab("Mercedes", <Mercedez />,) }}>
                                url of Mercedez
                        </Button>
                            <br />
                            <Button onClick={() => { this.AddTab("BMW", <BMW />) }}>url of /BMW</Button>
                            <br />
                            <Button onClick={() => { this.AddTab("Audi", <Audi />) }}>url of Audi</Button>
                            <br />
                            <Button onClick={() => { this.AddTab("Bentley", <Bentley />) }}>url of Bentley</Button>

                        </div>
                    </div>
                </Sider>
                <Content>
                    <div id="module">
                        <Tabs onChange={this.onChange} activeKey={this.state.activeKey} type="editable-card" closable="true" hideAdd>

                            {this.state.list.map(list => (
                                // if(lista.key===)
                                <TabPane tab={list.title} key={list.key}>
                                    {list.content}
                                </TabPane>
                            ))}
                        </Tabs>
                    </div>
                </Content>
            </Layout>
        </>
    );
}
}

AddTab（标题、内容）{
调试器；
var listCopy=this.state.list
const activeKey=`newTab${this.state.newTabIndex++}`；
var obj={title:title，content:content，key:activeKey}；
listCopy.push（obj）；
这是我的国家({
列表：listCopy
})
}
onChange=（activeKey）=>{
这是我的国家({
activeKey:activeKey
});
};
render（）{
返回(
侧菜单栏



{this.AddTab（“Mercedes”，）}>
Mercedez的url


{this.AddTab（“BMW”，）}>url/BMW


{this.AddTab（“Audi”，）}>Audi的url


{this.AddTab（“Bentley”，）}>Bentley的url
{this.state.list.map（list=>(
//如果（lista.key==）
{list.content}
))}
);
}
}

请先做一些努力，当你遇到问题时，把它贴在这里。