Javascript 在react中映射多级导航，是否可以使用foreach？

一直在阅读react文档，似乎使用foreach或for是react中的一种反模式。 因此，我想知道如何解决将4级导航扩展到不同组件的问题

该模板类似于firebase文档，有主菜单和次菜单，然后有多个级别的副菜单，在本例中为2

菜单由盖茨比提供，格式如下：

[
  {
    "title": "About",
    "url": "/about/",
    "target": "",
    "wordpress_parent": 0,
    "wordpress_children": null
  },
  {
    "title": "Page 1",
    "url": "/page1/",
    "target": "",
    "wordpress_parent": 0,
    "wordpress_children": [
      {
        "title": "Guides",
        "url": "/page1/guides/",
        "wordpress_children": null
      },
      {
        "title": "Reference",
        "url": "/page1/reference/",
        "wordpress_children": [
          {
            "url": "/page1/reference/browser-support/",
            "title": "Browser support",
            "wordpress_parent": 71
          },
          {
            "url": "/page1/reference/getting-started/",
            "title": "Getting started",
            "wordpress_parent": 71
          },
          {
            "url": "/page1/reference/getting-started/setup/",
            "title": "Setup",
            "wordpress_parent": 71
          }
        ]
      }
    ]
  }
]

主模板如下所示

   <Layout>
    <Header />
    <Layout>
      <Sidebar />
      <Layout style={{ padding: '0 24px 24px' }}>
      <Content >
      {props.children}
    </Content>
    </Layout>
    </Layout>
  </Layout>

{props.children}

标题和侧边栏应该通过这个布局获得它们的菜单属性

由于我的背景是从角度出发的，我会首先使用foreach make objects for sidebar和header遍历对象，并将它们作为选项插入，但由于foreach不是react中的模式，我不确定正确的方法是什么

---

在React中解决这个问题的正确方法是什么？

我认为正确的方法是在数组上使用

map

<不鼓励使用code>forEach，因为它会改变所调用的数组<但是，code>map返回新数组，这几乎总是一个更安全的选项。然而，我不完全确定你将如何处理这个数组，所以我的答案有点猜测

另外，我不会说

for

循环的

forEach

是一种反模式；它们都是javascript语法和工作流的重要组成部分，唯一需要记住的是它们的正确使用