在對象內映射並顯示多個數組-React.js

Question

我有一個嵌套的JSON文件來創建下拉超級菜單級別，我不確定如何映射和渲染多個級別的數組和對象以創建樹狀結構。

以下是我的JSON結構：

{
  "megamenu": [
    {
      "name": "level1.1",
      "link": "#"
    },
    {
      "name": "level1.2",
      "link": "#",
      "level1.2.1": {
        "A": [
          {
            "name": "A-one",
            "link": "#"
          }
        ],
        "B": [
          {
            "name": "B-one",
            "link": "#"
          }
        ]
      }
    },
    {
      "name": "level1.3",
      "link": "#",
      "children": [
        {
          "name": "level1.3.1",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.1",
              "link": "#"
            }
          ]
        },
        {
          "name": "level1.3.1.2",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.2",
              "link": "#"
            }
          ]
        }
      ]
    }
  ]
}

我可以這樣映射第一層：

let menuArray = [];
let menu = this.props.menu.megamenu
console.log(menu);
for (let key in menu) {
    menuArray.push(menu[key]);
    return (
        <section>
            <ul>
                {this.props.menu.megamenu.map((menuitem, index) = > (
                <div key={index}>
                    <li>{menuitem.name}</li>
                    </div>
                    ))}
            </ul>
        </section>
    );
}

但想映射所有級別並按以下結構顯示：

<ul>
    <li>Level1.1
    <li>
    <li>Level1.2
        <div className="dropdown">
            <ul>
                <li>A</li>
                <li>B</li>
            </ul>
            <ul>
                <li>A-one</li>
                <li>b-one</li>
            </ul>
        </div>

    </li>
</ul>
<li>
<li>Level1.3
    <div className="dropdown">
        <div className="col">
            <h2>level1.3.1</h2>
            <ul>
                <li>level1.3.1.1</li>
            </ul>
        </div>
        <div className="col">
            <h2>level1.3.2</h2>
            <ul>
                <li>level1.3.1.2</li>
            </ul>
        </div>
    </div>

</li>
<ul>

我試圖詳細解釋以便更好地理解，我們將不勝感激。

Answer 1

當您將結構更改為類似的內容時，

{
  "megamenu": [
    {
      "name": "level1.1",
      "link": "#"
    },
    {
      "name": "level1.2",
      "link": "#",
      "children": [
        {
          "name": "A-one",
          "link": "#"
        },
        {
          "name": "B-one",
          "link": "#"
        }
      ]
    },
    {
      "name": "level1.3",
      "link": "#",
      "children": [
        {
          "name": "level1.3.1",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.1",
              "link": "#"
            }
          ]
        },
        {
          "name": "level1.3.1.2",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.2",
              "link": "#"
            }
          ]
        }
      ]
    }
  ]
}

這很明顯，因為在子對象中添加新鍵是錯誤的方法，現在，您需要一個遞歸函數來處理此問題，這可能是這樣的

  getData = (menu) => {

    return <div>
      <li>{menu.name}</li>
      {(menu.children !== undefined && menu.children.length > 0) && <ul>{

        menu.children.map(data => {
          return this.getData(data);
        })
      }
      </ul>}
    </div>
  }

在內部渲染中，您可以更改為

 return (
      <section>
        <ul>
          {data.megamenu.map((menuitem, index) => (
            this.getData(menuitem)
          ))}
        </ul>
      </section>
    );

因此，我們所做的就是調用遞歸函數getdata 。

這是演示