react实现一个动态生成无限层级菜单

可以使用 React 的 Context API 来实现一个动态生成无限层级菜单。可以利用 Context API 将菜单数据传递到每个菜单项组件中，并且可以通过这些菜单项组件来实现无限层级菜单的生成。

相关问题

react实现一个简易三级菜单

以下是使用 React 实现一个简易的三级菜单的示例代码：

import React, { useState } from 'react';

const MenuItem = ({ title, subMenu }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleSubMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <li>
      <div onClick={toggleSubMenu}>{title}</div>
      {isOpen && (
        <ul>
          {subMenu.map((item, index) => (
            <MenuItem key={index} title={item.title} subMenu={item.subMenu} />
          ))}
        </ul>
      )}
    </li>
  );
};

const Menu = () => {
  const menuData = [
    {
      title: 'Menu 1',
      subMenu: [
        {
          title: 'Submenu 1-1',
          subMenu: [
            {
              title: 'Sub-submenu 1-1-1',
              subMenu: []
            },
            {
              title: 'Sub-submenu 1-1-2',
              subMenu: []
            }
          ]
        },
        {
          title: 'Submenu 1-2',
          subMenu: []
        }
      ]
    },
    {
      title: 'Menu 2',
      subMenu: []
    },
    {
      title: 'Menu 3',
      subMenu: []
    }
  ];

  return (
    <ul>
      {menuData.map((item, index) => (
        <MenuItem key={index} title={item.title} subMenu={item.subMenu} />
      ))}
    </ul>
  );
};

export default Menu;

在上述代码中，我们定义了两个组件：`MenuItem` 和 `Menu`。`MenuItem` 组件负责渲染每个菜单项，包括标题和可能的子菜单。通过使用 `useState` 来管理子菜单的展开与折叠状态。当点击菜单项时，`toggleSubMenu` 函数会切换子菜单的展开状态。

`Menu` 组件作为顶级组件，负责渲染整个菜单。在 `Menu` 组件中，我们传入一个包含菜单数据的数组 `menuData`，并通过 `map` 方法来遍历生成每个菜单项的 `MenuItem` 组件。

通过嵌套使用 `MenuItem` 组件，我们可以实现多级嵌套的菜单结构。每个菜单项都可以包含一个子菜单，从而实现了三级菜单的效果。

注意：上述代码只是一个简易的示例，实际应用中可能需要根据需求进行修改和扩展。

用react 实现一个菜单树组件

好的，我可以回答这个问题。以下是一个简单的 React 菜单树组件的示例代码：

import React, { useState } from 'react';

function MenuItem({ item, onItemClick }) {
  const [isOpen, setIsOpen] = useState(false);

  function handleItemClick() {
    if (item.children) {
      setIsOpen(!isOpen);
    } else {
      onItemClick(item);
    }
  }

  return (
    <li>
      <a href="#" onClick={handleItemClick}>
        {item.label}
      </a>
      {item.children && isOpen && (
        <ul>
          {item.children.map(child => (
            <MenuItem key={child.id} item={child} onItemClick={onItemClick} />
          ))}
        </ul>
      )}
    </li>
  );
}

function MenuTree({ items, onItemClick }) {
  return (
    <ul>
      {items.map(item => (
        <MenuItem key={item.id} item={item} onItemClick={onItemClick} />
      ))}
    </ul>
  );
}

export default MenuTree;

这个组件接受一个菜单项数组和一个点击回调函数作为 props。菜单项数组应该包含每个菜单项的 id、label 和 children 属性，其中 children 是一个可选的子菜单项数组。当用户点击菜单项时，如果该项有子菜单项，则展开或收起子菜单，否则调用传入的 onItemClick 回调函数。

希望这个示例代码能够帮助你实现你的菜单树组件！