当前位置：首页 > React

react实现无限菜单

2026-01-26 22:34:29React

实现无限菜单的方法

在React中实现无限菜单（嵌套层级不确定的菜单）通常需要递归组件和动态数据结构的结合。以下是具体实现步骤：

数据结构设计

使用嵌套对象数组表示菜单结构，每个菜单项包含label、children等属性：

const menuData = [
  {
    label: "菜单1",
    children: [
      {
        label: "子菜单1-1",
        children: [
          { label: "子菜单1-1-1" }
        ]
      }
    ]
  }
];

递归组件实现

创建递归渲染的MenuItem组件，自动处理任意层级嵌套：

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

  return (
    <li>
      <div onClick={() => setIsOpen(!isOpen)}>
        {item.label}
        {item.children && <span>{isOpen ? '▼' : '▶'}</span>}
      </div>

      {isOpen && item.children && (
        <ul>
          {item.children.map((child, index) => (
            <MenuItem key={index} item={child} />
          ))}
        </ul>
      )}
    </li>
  );
};

完整组件集成

将递归组件嵌入主菜单容器：

const InfiniteMenu = ({ data }) => {
  return (
    <ul className="menu-container">
      {data.map((item, index) => (
        <MenuItem key={index} item={item} />
      ))}
    </ul>
  );
};

// 使用方式
<InfiniteMenu data={menuData} />

样式优化建议

添加基础CSS实现视觉交互：

.menu-container ul {
  padding-left: 20px;
  list-style: none;
}
.menu-container li > div {
  cursor: pointer;
  padding: 5px;
}
.menu-container li > div:hover {
  background-color: #f0f0f0;
}

动态加载扩展

如需支持异步加载子菜单，可修改MenuItem组件：

const loadData = async (parentId) => {
  // 返回Promise获取子菜单数据
};

const MenuItem = ({ item }) => {
  const [children, setChildren] = useState(item.children || []);

  const handleClick = async () => {
    if (!children.length && !item.children) {
      const newChildren = await loadData(item.id);
      setChildren(newChildren);
    }
    setIsOpen(!isOpen);
  };

  // ...其余渲染逻辑相同
};