javascript - Reactjs - 当我单击特定页面上的按钮时创建动态子菜单项

Question

嗨，我是 Reactjs 的新手，并试图从 React 大师那里获得帮助

layout.js 有侧边栏菜单和子菜单项。

<Router>
  <Layout style={{ minHeight: '100vh' }}>
    <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
      <div className="logo" />
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
        <Menu.Item key="1" icon={<ImportOutlined /> } >
        <Link to="/import">
        <span>Import</span>
        </Link>
        </Menu.Item>
        <SubMenu key="sub1" icon={<CodeOutlined />} title="Organizer">
          <Menu.Item key="3"><Link to="/next-item"><span>emp.py</span></Link></Menu.Item>
          <Menu.Item key="4">Bill</Menu.Item>
          <Menu.Item key="5">Alex</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
          <Menu.Item key="6">Team 1</Menu.Item>
          <Menu.Item key="8">Team 2</Menu.Item>
        </SubMenu>
        <Menu.Item key="9" icon={<FileOutlined />}>
          Files
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout className="site-layout">
      <Header className="site-layout-background" style={{ padding: 0 }} />
      <Content style={{ margin: '0 16px' }}>
        <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
        <Switch>
        <Route exact path="/" component={GetDataAPI}>
        </Route>
        <Route path="/import" component={GetDataAPI}>
        </Route>
        <Route path="/next-item">
          <h1>Second Page</h1>
        </Route>
      </Switch>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Revelation ©2021 Created by Revelation Team</Footer>
    </Layout>
  </Layout>
</Router>

GetDataAPI.js -> 当我点击提交按钮时，它会调用 handleSubmit 并从 API 获取数据。api返回的数据需要传递给layout.js，并在侧边栏构建动态链接。API 返回电影名称，并希望动态创建每个电影名称的子菜单项。一旦我点击子项目上的特定电影名称，它应该转到特定的电影[0,1...].js。

<Button onClick={this.handleSubmit} size="large" type="primary" style={{ marginBottom: 16, marginLeft: 10 }} >获取电影

我正在使用 antd 布局模板。我在谷歌周围搜索无法通过。谢谢你的帮助！

标签： javascriptreactjsreact-routerantd