reactjs - 使用 React.js 和 Ant Design 的动态选项卡

Question

我想知道是否可以从侧面菜单和 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,
    };
}

添加新标签的功能：

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>
        </>
    );
}
}