迭代嵌套的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

如果将代码拆分为不同的组件会更好，每个组件负责呈现特定的类别级别。一旦你有了这个场景，也许你应该尝试使用 recursion 来实现它，在我看来这将是最好的解决方案。

const CategoryLevel3 = ({ href, name}) => {

  return (

    <li className="level-3">

      <a href={href}>{name}</a>

    </li>

  );

};

const CategoryLevel2 = ({ name, href, category = [] }) => {

  return (

    <li>

      <ul className="level-2">

        <h4>

          <a href={href}>{name}</a>

        </h4>

        {category.map(({ name, href }) => (

          <CategoryLevel3 href={href} name={name} key={name} />

        ))}

      </ul>

    </li>

  );

};

const CategoryLevel1 = ({ name, href, category = [] }) => {

  return (

    <ol className="level-1" key={name}>

      <h4>

        <a href={href}>{name}</a>

      </h4>

      {category.map(({ name, href, category = [] }) => (

        <CategoryLevel2 name={name} href={href} category={category} key={name} />

      ))}

    </ol>

  );

};

const Categories = ({ categories = [] }) => {

  return (

    <Fragment>

      {categories.map(({ name, href, category }) => (

        <CategoryLevel1 category={category} />

      ))}

    </Fragment>

  );

};

Answer 2

我用这种方法做到了。

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

      );

    })}