树形控件递归渲染的核心是通过props准确传递层级数据与回调。1. 用children prop传子节点纯数据；2. 用depth/path等prop传递层级上下文；3. 用onexpand等回调实现反向通信；4. 用唯一稳定key保障列表正确性。
树形控件的递归渲染本质是组件调用自身，而 Props 是唯一合法的传参通道。关键不在于“怎么递归”，而在于“如何通过 Props 把当前层级所需的信息准确、干净地传递下去”。
用 children Prop 承载子节点数据
父组件把子节点数组作为 children Prop 传给当前节点组件，子组件再遍历它并为每个子项渲染自身。这是最自然的递归入口：
- 避免在组件内部硬编码获取子节点逻辑（比如从全局 store 或 context 拿），保持可复用性
-
children值应是纯数据（如{ id, label, children: [...] }），而非预渲染的 JSX，否则会阻断递归控制流 - 示例：
<treenode data="{node}" children="{node.children}"></treenode>，子组件内用props.children?.map(...)触发下一层
用 depth、level 或 path 等 Props 传递层级上下文
不确定深度时，常需知道当前在哪一层（比如缩进、禁用深层编辑、高亮根路径）。这些信息不能靠组件自己推算，必须由父层通过 Props 显式传入：
Jianying Auto Editor
下载
一款AI工具，主要用于自动化从本地媒体及云编辑 API生成剪映草稿。当 Codex 需要扫描素材文件夹、请求编辑决策并...时使用，适合需要提升相关任务效率的用户。
-
depth：从 0 或 1 开始计数，父层传depth + 1 -
path：字符串路径（如"1.3.2"）或 ID 数组（如[1, 3, 2]），便于定位和操作 - 避免用 ref 或闭包捕获父级状态——这会让组件失去纯函数特性，难以测试和复用
用 onExpand、onSelect 等回调 Props 实现反向通信
子节点操作（如点击展开、选中）需要通知父层更新状态。由于 React 数据流单向，必须靠回调函数：
- 父组件定义处理函数（如
handleNodeToggle(id, expanded)），作为 Prop 传给子组件 - 子组件触发时调用
props.onExpand(node.id, !node.expanded)，让父层决定是否更新整个树数据 - 不要在子组件里直接修改父组件 state——这违反单向数据流，也导致状态分散
用 key 确保递归列表的稳定性
React 渲染递归列表时，key 必须唯一且稳定。常见错误是用数组索引作 key，一旦顺序变化就会出问题：
- 用节点唯一标识（如
node.id或组合键${parentPath}-${node.id}） - 若节点无 ID，可基于内容生成哈希（谨慎使用），或由父层分配临时 key
- key 不仅影响性能，更关系到 state 和动画的正确延续
递归树的核心是“每层只关心自己该收什么、该传什么”。Props 就是这个契约——只要每一层都守约，无论嵌套多深，结构都能自然展开、响应和收敛。
