Nested Lists 嵌套列表
最后更新：2026-10-28
Nested Lists 嵌套列表
当数据是「分类里套条目」的多层结构时，用 map 中再 map 或递归组件渲染嵌套列表。每一层各自维护 key，层层缩进展示层级关系，常见于菜单、评论树、文件树等场景。
| 分组 | 渲染与状态 |
|---|---|
| 类型 | 模式 |
| 引入版本 | React 最早版本 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
function TreeNode({ node }) {
return (
<li>
{node.name}
{node.children?.map((kid) => (
<TreeNode key={kid.id} node={kid} /> // 递归渲染子级
))}
</li>
)
}返回值：无返回值，作为编码约定/心智模型使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
等宽字体展示一棵可交互文件树：根目录 src 可点击折叠 / 展开，内有文件 main.jsx 和子目录 components（其下还有 Button.jsx），层级关系用缩进表达。💡 要点
💡 提示 树形数据先设计好唯一 id，递归组件的展开 / 折叠状态往往就按 id 记录在一处。
⚠️ 注意 递归组件必须有终止条件（如 children 为空）且每一层都写 key，否则死循环或警告。
ℹ️ 说明 层数固定（如两级菜单）时直接 map 套 map 更直观；深度不定时才用递归组件。
🏷️ 渲染与状态相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q React 怎么渲染树形数据？
A 两种方式：层数固定时 map 里再 map；深度不定时写一个递归组件，组件内部对 children 递归调用自己。
Q 递归组件要注意什么？
A 必须有终止条件避免无限递归；每层元素都要有唯一 key；展开状态建议集中管理而不是散在每层。
Q 嵌套列表的 key 怎么设置？
A 每一层 map 各自提供唯一 key，通常用每层节点的 id；同层唯一即可，不同层之间允许重复。
