Vue插槽嵌套过深报renderHeader未定义是组件内部逻辑崩，因v-if复用DOM未重解析插槽；React children多节点需单根包裹；provide/inject需响应式包装；内嵌组件导致state重置。
Vue 中 slot 嵌套过深报 cannot read property 'renderHeader' of undefined
这类错误不是 Vue 报的语法错，而是组件内部逻辑崩了——比如 el-table-column 或 u-collapse-item 这类深度封装组件，会预编译插槽结构、做实例缓存。一旦你用 v-if 控制插槽内容，它可能复用旧 DOM 节点但没重跑插槽解析逻辑，导致 renderHeader 等函数未定义。
- 给父级组件（如
<el-table>）加唯一:key，比如:key="tableKey"，每次数据变就强制重解析整个插槽树 - 别让
v-if直接包v-slot，改用<template v-if="show"><template v-slot:header>...</template></template> - 实在要条件控制插槽内容，用
<div v-if="..."><slot name="header"></slot></div>包一层，把v-if沉到 slot 出口内部
React 里 props.children 嵌套太深导致 Adjacent JSX elements must be wrapped...
这不是嵌套问题，是顶层返回了多个并列节点。JSX 不是 HTML 字符串，React.createElement 链要求单根返回。常见于写了个函数组件，里面直接 return <div></div> <p></p>。
- 多元素必须包裹：用
<React.Fragment>、简写<></>或<div> -
props.children类型不确定，别直接props.children.map或props.children.length—— 它可能是null、字符串、单个 element，或数组 - 安全处理统一用
React.Children.toArray(children)或React.Children.count(children)
Vue provide/inject 替代 slot 透传时，子组件拿不到注入值
provide/inject 不是响应式魔法，它只是“直连祖孙”，但默认不监听变化。如果你在 setup 里 provide('key', ref(value))，后代 inject('key') 拿到的是解包后的原始值，不是响应式引用。
- 要用
reactive或ref包一层再 provide：provide('theme', reactive({ color: 'blue' })) - inject 后别直接改，用
readonly()包裹防止下游误改源头：const theme = readonly(inject('theme')) - 如果需要修改，provide 时一并暴露方法：
provide('updateTheme', (newTheme) => { ... })
React 内嵌组件 + useState 导致状态重置
在父组件函数体内定义子组件（比如 function App() { const Inner = () => { const [x, setX] = useState(0); return <div>{x}</div> }; return <Inner /> }），每次父组件重渲染，Inner 就被重新声明，所有内部 state 全部初始化。
- 把子组件提到顶层声明，确保 React 能稳定复用它的函数引用
- 通过
props显式传入状态和 setter，而不是让它自己管理 - 别依赖“组件内嵌能自动闭包捕获父 state”——这违背 React 协调机制，必然出 bug
