如何在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

它最初渲染一个组件并为其提供一个字符串和数组的数组。在组件中，它映射每个项目并检查它是否是数组。如果它是一个数组，它将创建另一个元素但增加级别并提供下一组要映射的项目。该级别目前用于设置剩余边距以使其看起来分层。

这是一个非常简单的例子，但这个概念应该适用于你想要的东西 - 解决你的问题的最好方法是做一些递归的东西。