亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

迭代嵌套的javascript對象并在jsx中渲染的最高效方法是什么

迭代嵌套的javascript對象并在jsx中渲染的最高效方法是什么

墨色風雨 2022-01-13 16:33:45
我想將這個 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"              }            ]          }        ]      }    ]  }}
查看完整描述

2 回答

?
翻翻過去那場雪

TA貢獻2065條經驗 獲得超14個贊

如果將代碼拆分為不同的組件會更好，每個組件負責呈現特定的類別級別。一旦你有了這個場景，也許你應該嘗試使用 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>

  );

};


查看完整回答
反對 回復 2022-01-13
?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

我用這種方法做到了。



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

      );

    })}


查看完整回答
反對 回復 2022-01-13
  • 2 回答
  • 0 關注
  • 180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號