javascript - 什么是迭代嵌套的 javascript 对象并在 jsx 中呈现的最有效方法

Question

我想在 React 组件中将这个嵌套的 JS 对象渲染成 ol > li > ol > li 格式，并且嵌套对象应该按级别缩进。

JSON 示例数据:https://jsfiddle.net/39o8nrpk/

如果我能找到使用 JavaScript 以高性能方式呈现这些数据的解决方案，那将是非常有帮助的。

{
  "data": {
    "content": "Page Title",
    "url": "/",
    "categories": [
      {
        "href": "/",
        "name": "level 1",
        "category": [

        ]
      },
      {
        "href": "/",
        "name": "level 1",
        "category": [
          {
            "href": "/",
            "name": "level 2",
            "category": [

            ]
          },
          {
            "href": "/",
            "name": "level 2",
            "category": [{
                "href": "/",
                "name": "level 3"
              },
              {
                "href": "/",
                "name": "level 3"
              },
              {
                "href": "/",
                "name": "level 3"
              }
            ]
          },
          {
            "href": "/",
            "name": "level 2",
            "category": [

            ]
          },
          {
            "href": "/",
            "name": "level2",
            "category": [{
                "href": "/",
                "name": "level3"
              },
              {
                "href": "/",
                "name": "level3"
              },
              {
                "href": "/",
                "name": "level3"
              }
            ]
          }
        ]
      }
    ]
  }
}

Answer 1

我是用这种方法做的。

{categories.map(({ name, href, category }) => {
      return (
        <ol className="level-1">
          <h4><a href={href}>{name}</a></h4>
          {category && category.map(({ name: nameL2, href: hrefL2, category: categoriesL2 }) => {
            return (
                <li>
                  <ul className="level-2"> 
                  <h4><a href={hrefL2} >{nameL2}</a></h4>
                    {categoriesL3 &&
                      categoriesL3.map(({ name: nameL3, href: hrefL3 }) => {
                        return (
                          <li className="level-3">
                            <a href={hrefL3}>{nameL3}</a>
                          </li>
                          )
                        );
                      })}
                  </ul>
                </li>
              )
          })}
        </ol>
      );
    })}