时间戳

首页 > 解决方案 > 如何在反应中使用地图进行递归

reactjs - 如何在反应中使用地图进行递归

问题描述

我有 JSON 数据，我想读取所有数据并制作一个下拉列表。这是我编写的示例代码。在此代码中仅显示第 2 级。我想要所有级别。

{
                                menu_data.map((menu)=>(
                                    menu.children ? 
                                    <div class="menu-item sub-nav">{menu.name}
                                         <div class="menu-container">{menu.children.map((child)=>(<div class="menu-item"><a href={child.url}>{child.name}</a></div>))}</div>
                                    </div>
                                    :
                                    <div class="menu-item">{menu.name}</div>
                                       
                                ))
                            }

The JSON data looks like

[{
   "name": "ABC",
   "url": "/abc.html"
},
{
   "name": "XYZ",
   "children": [{
         "name": "PQR",
         "url": " /pqr.jsp"
      },
      {
         "name": "MOB",
         "url": "/hello"
      },
      {
         "name": "TOC",
         "children": [
                {
                 "name": "LOL",
                 "url": "/hello"
              },
              {
                 "name": "RST",
                 "url": "/hello"
              },
              {
                 "name": "NULL",
                 "url": "/hello"
              }
         ]
      },
         ]
      }
   ]
},
{
   "name": "def",
   "url": "/def.html"
}
]

请参阅此屏幕截图。就这样，我想表现出来。 在此处输入图像描述

  1. 任何人都有任何想法。

     How to solve this problem.

标签： reactjs

解决方案

你menu_data也有一个问题：

const menu_data = [
    {
        name: "ABC",
        url: "/abc.html",
    },
    {
        name: "XYZ",
        children: [
            {
                name: "PQR",
                url: "/pqr.jsp",
            },
            {
                name: "MOB",
                url: "/hello",
            },
            {
                name: "TOC",
                children: [
                    {
                        name: "LOL",
                        url: "/hello",
                    },
                    {
                        name: "RST",
                        url: "/hello",
                    },
                    {
                        name: "NULL",
                        url: "/hello",
                    },
                ],
            },
        ],
    },
    {
        name: "def",
        url: "/def.html",
    },
];

定义递归菜单渲染器，如下所示：

    const renderMenu = (menu) => {
        return menu.map((item) => (
            <>
                {item.children ? (
                    <div className="menu-item sub-nav">
                        {item.name}
                        <div className="menu-container">
                            {renderMenu(item.children)}
                        </div>
                    </div>
                ) : (
                    <div className="menu-item">
                        <a href={item.url}>{item.name}</a>
                    </div>
                )}
            </>
        ));
    };

如下所示：

    return <div className="menu-container">{renderMenu(menu_data)}</div>;

此处的工作示例：https ://codesandbox.io/s/confident-cloud-hw5pl?file=/src/App.js

推荐阅读