Как динамически генерировать выпадающий из вложенного массива в ReactJS

Question

Я могу сделать вложенный выпадающий без проблем, но я не знаю, как сделать его динамичным. Он может идти даже до 5-8 уровней. Я понимаю, что это можно сделать с помощью функции .map (), которая будет вызываться внутри себя снова, если есть какие-либо дополнительные раскрывающиеся списки. Таким образом, я мог получить доступ ко всем данным, но что делать дальше, я не знаю.

Массив выглядит примерно так (только некоторая его часть):

categories = [
  {
    title : "Electronics", path : "Electronics", id : 1, subCat: [
      {title : "Computers", path : "Electronics->Computers", id : 11, subCat: [
        {title : "Desktop", path : "Electronics->Computers->Desktop", id : 111, subCat: [
          {title : "Gaming", path : "Electronics->Computers->Desktop->Gaming", id : 1111, subCat: null},
          {title : "Office", path : "Electronics->Computers->Desktop->Office", id : 1112, subCat: null}
        ]},
        {title : "Laptops", path : "Electronics->Computers->Laptops", id : 112, subCat: [
          {title : "Gaming", path : "Electronics->Computers->Laptops->Gaming", id : 1121, subCat: null},
          {title : "Office", path : "Electronics->Computers->Laptops->Office", id : 1122, subCat: null}
        ]}
      ]}
    ]
  },
  {
    title : "Cars", path : "Cars", id : 2, subCat: [
      {title : "Parts & Accessories", path : "Cars->Parts & Accessories", id : 21, subCat: [
        {title : "Car Parts", path : "Cars->Parts & Accessories->Car Parts", id : 211, subCat: null},
        {title : "Car Accessories", path : "Cars->Parts & Accessories->Car Accessories", id : 211, subCat: null},
        {title : "Parts", path : "Cars->Parts & Accessories->Parts", id : 212, subCat: null},
        {title : "Paintwork", path : "Cars->Parts & Accessories->Paintwork", id : 213, subCat: null},
        {title : "Tyres & Rims", path : "Cars->Parts & Accessories->Tyres & Rims", id : 214, subCat: [
          {title : "Tyres", path : "Cars->Parts & Accessories->Tyres & Rims->Tyres", id : 2141, subCat: null},
          {title : "Rims", path : "Cars->Parts & Accessories->Tyres & Rims->Rims", id : 2142, subCat: null},
          {title : "Trims", path : "Cars->Parts & Accessories->Tyres & Rims->Trims", id : 2143, subCat: null},
          {title : "Accessories", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories", id : 2144, subCat: [
            {title : "Hub Centre Caps", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Hub Centre Caps", id : 21441, subCat: null},
            {title : "Valve Caps", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Valve Caps", id : 21442, subCat: null},
            {title : "Tyre Bags", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Tyre Bags", id : 21443, subCat: null}
            {title : "Bolts & Nut Covers", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Bolts & Nut Covers", id : 21444, subCat: null}
          ]},
        ]}
      ]}
    ]
  }
]

Может кто-нибудь помочь мне, пожалуйста, с какой-нибудь идеей или примером? Спасибо.

Answer 1

Если вы хотите создать что-то, что может быть динамически вложено, вы можете создать компонент, который может визуализировать себя, а затем передать текущий уровень элементов для визуализации.

Если вы посмотрите на этот простой пример: https://codesandbox.io/s/rln82loyj4?fontsize=14

Первоначально он визуализирует один компонент и дает ему массив строк и массивов.В компоненте он сопоставляет каждый элемент и проверяет, является ли он массивом или нет.Если это массив, он создаст другой элемент, но увеличит уровень и предоставит следующую группу элементов для отображения.В настоящее время уровень используется для установки поля слева, чтобы он выглядел многоуровневым.

Это довольно простой пример, но концепция должна быть применима к тому, что вы хотите - лучший способ решить вашу проблему - сделать что-то рекурсивное.