在一个对象内映射和显示多个数组 - Reactjs

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。

这里是demo