时间戳

首页 > 解决方案 > 如何从 ReactJS 中的嵌套数组动态生成下拉列表

reactjs - 如何从 ReactJS 中的嵌套数组动态生成下拉列表

问题描述

我可以毫无问题地制作嵌套下拉列表，但我不知道如何使其动态化。它甚至可以达到 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}
          ]},
        ]}
      ]}
    ]
  }
]

有人可以在这里帮我一些想法或例子吗？谢谢。

标签： reactjsdropdown

解决方案

如果你想制作可以动态嵌套的东西，你可以制作一个可以渲染自己的组件，然后传递当前级别的项目来渲染。

如果你看这个简单的例子：https ://codesandbox.io/s/rln82loyj4?fontsize=14

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

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

推荐阅读