如何在React中根据Rank属性将对象数组转换为嵌套UL结构？

我需要将以下员工数据按照Rank属性层级渲染为嵌套的<ul>结构：

const staff = [
  { Rank: 1, ID: '1', Role: 'Managing Director', Name: 'Peter' },
  { Rank: 2, ID: '2', Role: 'Operations Director', Name: 'Jane' },
  { Rank: 3, ID: '4', EmployeeImage: '', Role: 'Senior Developer', Name: 'Tom' },
  { Rank: 2, ID: '3', EmployeeImage: '', Role: 'Head of Client Services', Name: 'John' }
]

期望输出的HTML结构如下：

<div>
  <h2>Managing Director</h2>
  <ul>
    <li>
      <h2>Operations Director</h2>
      <ul>
        <li>
          <h2>Senior Developer</h2>
        </li>
      </ul>
    </li>
    <li>
      <h2>Head of Client Services</h2>
    </li>
  </ul>
</div>

我目前尝试用大量JSX条件判断来实现，但不仅进度受阻，代码还变得非常混乱。想请教：这种实现方向是否正确？有没有更优的实现方法？

用一堆JSX条件判断来处理层级渲染确实会让代码变得臃肿且难以维护，这绝对不是最优解。我们可以换个思路：先把扁平的员工数组转换成树形结构，再通过递归组件来渲染嵌套列表，这样代码会简洁很多，扩展性也更强。

步骤1：转换扁平数组为树形结构 #

首先写一个工具函数，把按Rank排序的扁平数组转成层级树。这里假设Rank是连续的层级（Rank 1是根节点，Rank 2是Rank 1的子节点，Rank 3是Rank 2的子节点，以此类推）：

const buildHierarchy = (staff) => {
  // 先按Rank排序，确保层级顺序正确
  const sortedStaff = [...staff].sort((a, b) => a.Rank - b.Rank);
  const hierarchy = [];
  const levelMap = {};

  sortedStaff.forEach(employee => {
    const rank = employee.Rank;
    // 把当前员工存入对应层级的映射
    levelMap[rank] = employee;
    // 将员工的子节点初始化为空数组
    employee.children = [];

    if (rank === 1) {
      // Rank 1是根节点，直接加入层级树
      hierarchy.push(employee);
    } else {
      // 找到上一层级的父节点，把当前员工加入其子节点
      const parent = levelMap[rank - 1];
      if (parent) {
        parent.children.push(employee);
      }
    }
  });

  return hierarchy;
};

步骤2：递归渲染树形组件 #

接下来写一个递归的React组件，用来渲染每个层级的节点和子列表：

const EmployeeNode = ({ employee }) => {
  if (!employee) return null;

  return (
    <li>
      <h2>{employee.Role}</h2>
      {/* 如果有子节点，渲染嵌套的ul和子组件 */}
      {employee.children.length > 0 && (
        <ul>
          {employee.children.map(child => (
            <EmployeeNode key={child.ID} employee={child} />
          ))}
        </ul>
      )}
    </li>
  );
};

步骤3：在父组件中使用 #

最后在你的主组件里调用这两个部分：

const OrgChart = () => {
  const staffHierarchy = buildHierarchy(staff);

  return (
    <div>
      {/* 根节点（Rank 1）单独处理，因为它不在ul里 */}
      {staffHierarchy.map(root => (
        <>
          <h2>{root.Role}</h2>
          {root.children.length > 0 && (
            <ul>
              {root.children.map(child => (
                <EmployeeNode key={child.ID} employee={child} />
              ))}
            </ul>
          )}
        </>
      ))}
    </div>
  );
};

为什么这个方法更好？ #

• 代码更简洁：递归组件避免了大量重复的条件判断，逻辑更清晰
• 扩展性强：不管后续新增多少层级（比如Rank 4、Rank 5），代码都不需要大改
• 可维护性高：数据处理和UI渲染分离，逻辑分工明确

如果你的Rank规则不是连续的（比如Rank 1之后可能直接跳Rank 3），只需要稍微调整buildHierarchy函数的父节点匹配逻辑即可，灵活性很高。

内容的提问来源于stack exchange，提问作者Álvaro