如何在 React.JS 中从 JSON 渲染嵌套地图？答案

【问题标题】：How to render nested map from JSON in React.JS?如何在 React.JS 中从 JSON 渲染嵌套地图？
【发布时间】：2021-07-21 19:32:54
【问题描述】：

我正在尝试从 JSON 呈现菜单值。考虑到这是一个多级菜单，我正在尝试做一个嵌套地图来呈现完整的菜单。

const menu = {
  data:[
  {
    title: "Home",
    child: [
      {
        title: "SubLevel1",
        child: {
          title: "SubSubLevel1"
        }
      },
      {
        title: "SubLevel2",
        child: [
          {title: "SubSubLevel1"},
          {title: "SubSubLevel2"}
        ]
      }
    ]
  },
  {
    title: "About",
  },
  {
    title: "Contact",
  }
]}

这是我使用地图功能的部分：

const MenuNavigation = () => {
    return (
        {menu.data.map((item) => ( 
            <div>
                <ul>{item.title}</ul> 
                {item.map((sub, id) =>
                    <li>{sub.child[id].title}</li>
                )} 
            </div>
        ))}
    )
};

我设法为菜单（主页、关于、联系人）呈现主级别，但如何打印子级别和子子级别值？

另一个问题：有没有办法递归地映射树结构？

【问题讨论】：

是的，您可以递归地渲染菜单。但是您的菜单没有一致的结构？如果subChild被child替换，text被title替换，project被title替换，那么就可以这样做。你能像这样更新问题吗？只有在可能的情况下才能给出答案。
@AmilaSenadheera 我按照你的要求做了，但你不认为它会造成变量冲突吗？感谢您的帮助。
递归执行不会发生冲突

标签： javascript json reactjs list dictionary

【解决方案1】：

试试下面：

menu 应该是这样的。您的菜单在数组中未定义的“SubLevel1”子项中存在一个问题。

  const menu = {
    data: [
      {
        title: "Home",
        child: [
          {
            title: "SubLevel1",
            child: [{
              title: "SubSubLevel1",
            }],
          },
          {
            title: "SubLevel2",
            child: [{ title: "SubSubLevel1" }, { title: "SubSubLevel2" }],
          },
        ],
      },
      {
        title: "About",
      },
      {
        title: "Contact",
      },
    ],
  };

递归地渲染它，如下所示。我添加了一个margin-left来正确查看级别。

  const renderMenu = (menu) => {
    return menu.map((item) => (
        <div style={{ marginLeft: '25px' }}>
            {item.title}
            {item.child && renderMenu(item.child)}
        </div>
    ))
  }

  return <div>{renderMenu(menu.data)}</div>;

【讨论】：