ReactJS 如何将递归结构对象数组渲染为带自定义类名的n层嵌套树

你可以通过抽离独立的递归节点组件实现任意层级的动态渲染，不需要硬编码每一层的结构，实现逻辑如下：

完整实现代码 #

// 抽离递归树节点组件
const TreeNode = ({ node }) => {
  // 判断当前节点是否为叶子节点（根据className是否包含leaf判断）
  const isLeaf = node.className.includes('leaf')

  return (
    <>
      {/* 渲染当前节点 */}
      <div className={node.className}>
        {/* 叶子节点渲染line元素 */}
        {isLeaf && <span className="line" />}
        <div className="details-holder">
          <span className="item-text">{node.name}</span>
        </div>
      </div>
      {/* 如果有子节点，递归渲染子节点 */}
      {node.children?.length > 0 && node.children.map(child => (
        <TreeNode key={child.name} node={child} />
      ))}
    </>
  )
}

// 外层调用组件
const Tree = ({ data }) => {
  return (
    <div className="tree-container">
      {data.map(rootNode => (
        <TreeNode key={rootNode.name} node={rootNode} />
      ))}
    </div>
  )
}

// 业务代码中使用示例
// 假设你的数据存在data变量中
// return <Tree data={data} />

实现说明 #

• 递归组件会自动处理所有层级的节点，不管是3层还是10层都能正常渲染，不需要手动修改代码适配层级
• 节点的className直接复用数据里自带的属性，符合要求的类名挂载规则
• 自动根据节点类型渲染对应结构：父节点（group类）不会渲染line元素，子节点（leaf类）会自动带上line元素
• 如果节点name可能重复，建议给每个节点加唯一id字段，替换key的取值为child.id避免React报错

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