当前位置：首页 > React

react实现6级菜单

2026-01-27 14:12:28React

实现思路

在React中实现6级菜单需要递归组件或动态渲染逻辑，确保每级菜单能展开/折叠子菜单。核心在于数据结构设计和组件递归调用。

数据结构设计

菜单数据通常为嵌套结构，例如：

const menuData = [
  {
    id: 1,
    title: "Level 1",
    children: [
      {
        id: 2,
        title: "Level 2",
        children: [
          // 继续嵌套至Level 6
        ]
      }
    ]
  }
];

递归组件实现

通过递归组件MenuItem渲染每一级菜单，支持动态展开/折叠：

const MenuItem = ({ item }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div>
      <div 
        onClick={() => setIsExpanded(!isExpanded)}
        style={{ cursor: "pointer" }}
      >
        {item.title}
        {item.children && <span>{isExpanded ? " -" : " +"}</span>}
      </div>
      {isExpanded && item.children?.map(child => (
        <div key={child.id} style={{ marginLeft: "20px" }}>
          <MenuItem item={child} />
        </div>
      ))}
    </div>
  );
};

完整示例

将递归组件与数据结合，渲染完整菜单：

const App = () => {
  return (
    <div>
      {menuData.map(item => (
        <MenuItem key={item.id} item={item} />
      ))}
    </div>
  );
};

样式优化

通过CSS增强可读性，例如缩进、悬浮效果：

.menu-item {
  padding: 8px;
  transition: background-color 0.2s;
}
.menu-item:hover {
  background-color: #f0f0f0;
}

性能考虑

避免重复渲染：使用React.memo优化MenuItem组件。
虚拟滚动：若菜单项过多（如超过1000条），使用react-window库优化长列表渲染。

动态加载扩展

若子菜单数据量庞大，可改为异步加载：

const loadChildren = async (parentId) => {
  const response = await fetch(`/api/menu?parentId=${parentId}`);
  return response.json();
};

在展开时动态更新数据：

react实现6级菜单

onClick={() => {
  if (!item.children) {
    loadChildren(item.id).then(children => updateMenuData(item.id, children));
  }
  setIsExpanded(!isExpanded);
}}