javascript - 什么是最有效的方法来迭代嵌套的javascript对象并在jsx中呈现(What is most performant way to iterate nested javascript objects and render inside jsx)

Question

I would like to render this nested JS object inside React component into ol > li > ol > li format, and nested objects should be indented as per level.

(我想将此React组件内的嵌套JS对象呈现为ol> li> ol> li格式，并且嵌套对象应按级别缩进。)

JSON Sample data : https://jsfiddle.net/39o8nrpk/

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

It will be great help if I can get the solution to render this data in a performant way using JavaScript.

(如果我可以获得使用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"
              }
            ]
          }
        ]
      }
    ]
  }
}

  ask by Raghav translate from so

Answer 1

I did it using this approach.

(我使用这种方法做到了。)

{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>
      );
    })}