Карта и отображение нескольких массивов внутри объекта - 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.

Вот демоверсия