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

Question

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

该模板类似于firebase文档https://firebase.google.com/docs/guides，具有主菜单和辅助菜单，然后是具有多个级别的侧边菜单，在本例中假设为2。

菜单由gatsby提供，格式如下：

[
  {
    "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>

页眉和边栏应该通过这个布局获得它们的菜单属性。

由于我的背景来自angular，我首先会使用foreach来遍历对象，为侧边栏和页眉制作对象，并将它们作为选项插入，但由于foreach不是react中的模式，我不确定正确的方法是什么。

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

Answer 1

我认为正确的方法是在数组上使用map。不鼓励使用forEach，因为它会改变被调用的数组。然而，map返回新的数组，这几乎总是一种更安全的选择。但是，我不能完全确定您将如何处理这个数组，所以我的答案有点像是猜测。

而且，我不会说for循环的forEach是反模式的；它们都是javascript语法和工作流程的重要部分，唯一要记住的就是它们的正确使用。