时间戳

首页 > 解决方案 > 在反应中映射多级导航，可以使用foreach吗？

javascript - 在反应中映射多级导航，可以使用foreach吗？

问题描述

一直在阅读反应文档，似乎使用 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>

Header 和 Sidebar 应该通过这种布局获得它们的菜单属性。

由于我的背景来自角度，我会首先使用 foreach 为侧边栏和标题制作对象并将它们作为选项插入，但由于 foreach 不是反应模式，我不确定正确的方法是什么。

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

标签： javascriptreactjs

解决方案

我认为正确的方法是map在数组上使用。forEach不鼓励，因为它改变了它被调用的数组。map但是，返回新数组，这几乎总是一个更安全的选择。但是我不完全确定你打算用这个数组做什么，所以我的回答有点猜测。

另外，我不会说循环forEach是for一种反模式。它们都是 javascript 语法和工作流程的重要组成部分，唯一要记住的是它们的正确用法。

推荐阅读