React独立组件动态构建treeview未更新渲染问题求助

核心问题：组件入参接收错误 #

React函数组件的第一个参数是完整的props对象，你当前代码直接把第一个参数命名为groups，实际拿到的是包含groups属性的props对象，并不是你传入的groups数组本身。因此groups.length始终为undefined，groups.length > 0的条件判断永远不成立，buildHierarchy函数不会执行，最终只能拿到空的外层<ul>元素。

修复步骤 #

第一步：修正参数接收 #

对组件入参进行解构，直接拿到传入的groups数组：

// 解构props获取groups参数
export default function Hierarchy({ groups }) {
    const buildHierarchy = (groups) => {
        return groups.map(obj => {
            return (
                <React.Fragment key={obj.id}>
                    <li>{obj.name}</li>
                    {/* 加可选链避免无children属性时报错 */}
                    {obj.children?.length > 0 && <ul>{buildHierarchy(obj.children)}</ul>}
                </React.Fragment>
            )
        })
    }
    return (
        <ul>
            {groups?.length > 0 && buildHierarchy(groups)}
        </ul>
    )
}

第二步：优化边界判断 #

新增可选链?.语法，避免当节点不存在children属性时抛出长度读取错误，兼容叶子节点的场景。

动态渲染说明 #

修复入参问题后，只要父组件传入的groups引用发生更新，Hierarchy组件会自动触发重渲染，递归生成完整的树形结构，无需额外手动处理重渲染逻辑。

测试传入示例 #

你可以用如下结构的groups参数测试渲染效果：

const groups = [
  {
    id: 1,
    name: '一级节点1',
    children: [
      { id: 11, name: '二级节点1-1', children: [] },
      { id: 12, name: '二级节点1-2', children: [{ id: 121, name: '三级节点1-2-1', children: [] }] }
    ]
  },
  { id: 2, name: '一级节点2', children: [] }
]

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