如何基于两个对象数组生成带父子层级的新对象数组？

要把给定的两个数组关联成可用于React动态渲染的层级菜单数组，你可以按以下步骤操作：

步骤1：创建菜单ID的快速映射 #

先把menus数组转成以ID为键的对象，这样能通过ID直接定位菜单项，避免反复遍历数组浪费性能：

const menuMap = menus.reduce((map, menu) => {
  map[menu.id] = menu;
  return map;
}, {});

步骤2：构建带层级的菜单数组 #

遍历childrenMap，为每个父菜单匹配对应的子菜单对象，添加到父菜单的children属性中：

const nestedMenus = childrenMap.map(item => {
  // 复制父菜单对象，避免修改原数据
  const parentMenu = {...menuMap[item.parent]};
  // 兼容原数据里的拼写错误（其中一项写的是chilren而非children）
  const childIds = item.children || item.chilren;
  // 将子菜单ID转换为实际的菜单对象数组
  parentMenu.children = childIds.map(id => menuMap[id]);
  return parentMenu;
});

最终生成的层级数组结构 #

执行完上述代码后，nestedMenus的结构如下，刚好适配React的层级渲染需求：

[
  {
    id: 1,
    text: 'Home',
    link: '#',
    children: [
      { id: 2, text: 'Home page 1', link: '#' },
      { id: 3, text: 'Home page 2', link: '#' }
    ]
  },
  {
    id: 4,
    text: 'Shop',
    link: '#',
    children: [
      { id: 5, text: 'two column', link: '#' },
      { id: 6, text: 'single column', link: '#' }
    ]
  }
]

React中渲染层级菜单的示例 #

可以用组件递归的方式渲染这个层级菜单：

function MenuItem({ menu }) {
  if (menu.children) {
    return (
      <li>
        <a href={menu.link}>{menu.text}</a>
        <ul>
          {menu.children.map(child => (
            <MenuItem key={child.id} menu={child} />
          ))}
        </ul>
      </li>
    );
  }
  return (
    <li>
      <a href={menu.link}>{menu.text}</a>
    </li>
  );
}

function Menu() {
  return (
    <ul>
      {nestedMenus.map(menu => (
        <MenuItem key={menu.id} menu={menu} />
      ))}
    </ul>
  );
}

提示：建议修正childrenMap里的拼写错误（把chilren改成children），让代码更规范。

内容的提问来源于stack exchange，提问作者Md Muaz Ahmed