当前位置：首页 > JavaScript

js实现四层树形菜单

2026-01-31 05:23:17JavaScript

实现四层树形菜单的步骤

数据结构设计

使用嵌套对象或数组表示树形结构，每个节点包含 id、label、children 等属性：

const treeData = [
  {
    id: 1,
    label: "一级菜单1",
    children: [
      {
        id: 11,
        label: "二级菜单1",
        children: [
          {
            id: 111,
            label: "三级菜单1",
            children: [
              { id: 1111, label: "四级菜单1" },
              { id: 1112, label: "四级菜单2" }
            ]
          }
        ]
      }
    ]
  }
];

递归渲染组件

通过递归组件实现动态渲染，支持任意层级展开/折叠：

function TreeNode({ node }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div>
      <div onClick={() => setIsExpanded(!isExpanded)}>
        {node.children && <span>{isExpanded ? '−' : '+'}</span>}
        {node.label}
      </div>
      {isExpanded && node.children && (
        <div style={{ marginLeft: '20px' }}>
          {node.children.map(child => (
            <TreeNode key={child.id} node={child} />
          ))}
        </div>
      )}
    </div>
  );
}

样式优化

添加基础样式增强交互体验：

.tree-node {
  cursor: pointer;
  padding: 5px;
}
.tree-node:hover {
  background-color: #f0f0f0;
}

动态加载支持

对于大数据量场景，可结合懒加载优化性能：

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

完整示例代码

整合后的组件实现：

import React, { useState } from 'react';

function TreeMenu({ data }) {
  return (
    <div className="tree-menu">
      {data.map(node => (
        <TreeNode key={node.id} node={node} />
      ))}
    </div>
  );
}

function TreeNode({ node }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [children, setChildren] = useState(node.children || []);

  const handleToggle = async () => {
    if (!children.length && node.hasChildren) {
      const loadedChildren = await loadChildren(node.id);
      setChildren(loadedChildren);
    }
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="tree-node">
      <div onClick={handleToggle}>
        {node.hasChildren && <span>{isExpanded ? '−' : '+'}</span>}
        {node.label}
      </div>
      {isExpanded && children.length > 0 && (
        <div style={{ marginLeft: '20px' }}>
          {children.map(child => (
            <TreeNode key={child.id} node={child} />
          ))}
        </div>
      )}
    </div>
  );
}