如何实现递归组件？手把手教你开发一个支持无限层级的树形菜单-Vue.js-PHP中文网

递归组件的核心是组件在模板中调用自身并设终止条件以避免无限循环；树形菜单是典型应用，需命名组件（vue）或自调用（react），通过children存在性控制递归，配合key、懒加载、展开状态等增强实用性。

如何实现递归组件？手把手教你开发一个支持无限层级的树形菜单

递归组件的核心在于：组件在模板中调用自身，并通过合理的条件控制递归终止，避免无限循环。树形菜单正是典型场景——每个节点可能包含子节点，子节点结构与父节点一致。

一、理解递归组件的关键前提

Vue 或 React 中实现递归，不是靠“写个函数反复调用”，而是让组件在渲染时根据数据决定是否再次渲染自己。必须满足两个条件：

组件需有明确的名称（如 Vue 中 name: 'TreeItem'），否则无法在模板里引用自身
必须有终止条件，比如当 children 为空数组或 undefined 时，不再渲染子节点部分

二、Vue 中实现树形菜单（组合式 API + 模板递归）

假设数据格式为嵌套对象数组：

```js
const treeData = [
{ id: 1, label: '首页', children: [] },
{ id: 2, label: '产品', children: [
{ id: 21, label: 'Web 端', children: [] },
{ id: 22, label: '移动端', children: [
{ id: 221, label: 'iOS', children: [] },
{ id: 222, label: 'Android', children: [] }
]}
]},
{ id: 3, label: '关于', children: null }
];
```

创建一个名为 TreeItem.vue 的单文件组件：

Crash Fixer

一款AI工具，主要用于自动分析崩溃并修复错误。监控 Cloudflare D1 崩溃报告，进行去重和 Codex 5.3 High 分析，生成修复并创建...，适合需要提升相关任务效率的用户。

下载

在 <script setup></script> 中定义 props 接收 node 和可选的 level（用于缩进或样式）
在模板中渲染当前节点内容，再用 <treeitem></treeitem> 标签递归渲染 node.children 中的每一项
用 v-if="node.children?.length" 控制是否展开子节点区域

三、React 中实现（函数组件 + 自调用）

无需特别命名，直接在组件内部调用自己即可：

```tsx
interface TreeNode {
id: string;
label: string;
children?: TreeNode[];
}

const TreeItem: React.FC = ({ node, level = 0 }) => {
const indent = level * 20;
return (

{node.label}

{node.children && node.children.length > 0 && (

{node.children.map(child => (

))}

)}

);
};
```

注意点：