JSX嵌套组件必须用闭合标签，不可省略结束标签；多元素需包裹Fragment或div；props.children类型不确定，须用React.Children方法安全处理；深层嵌套推荐Context或render props。
React 中 JSX 嵌套组件必须用闭合标签
JSX 不是字符串模板，而是 JavaScript 语法扩展，React.createElement 调用链决定了嵌套结构必须合法。写成 ）。
常见错误现象：Adjacent JSX elements must be wrapped in an enclosing tag——本质是顶层返回了多个并列节点，不是嵌套问题，但新手常误以为是“嵌套写错了”。
- 组件返回多元素时，必须包裹一层（、
>）props.children是隐式传入的，只有在父组件 JSX 里写了子内容，子组件才会有children；空标签如props.children是undefined- 函数组件内 return 多个兄弟节点（没包裹）会直接报错，和嵌套无关，但容易混淆
props.children 类型不确定，别直接 .map 或 .length
props.children可能是null、string、number、单个ReactElement，或数组（当传入多个子节点时）。直接调用props.children.map或读取props.children.length会崩。使用场景：封装布局组件（如
Card、Layout）、条件渲染子内容、统计子节点数量等。立即学习“前端免费学习笔记（深入）”；
- 安全判断用
React.Children.count(children)或React.Children.toArray(children) -
React.Children.forEach和React.Children.map能正确处理所有类型，包括undefined和 fragment - 不要用
Array.isArray(props.children)判断——fragment 或单个元素都会返回 false
嵌套过深导致 props 钻透？用 Context 或 render props 更稳
当组件 A → B → C → D 需要共享某个值（比如主题、用户信息），逐层传
props不仅啰嗦，还让中间组件被迫感知无关数据，一改全动。性能影响：纯函数组件若 props 浅比较变化，哪怕只改了个深层字段，中间组件也会重渲染。
-
useContext是最常用解法，但注意 Context 更新会触发所有消费者重渲染，别把高频变动的值塞进去 - 需要精细控制更新范围？考虑
useMemo包裹子组件，或拆出独立 Context（比如ThemeContext和UserContext分开） - render props（即
children为函数）适合逻辑复用，但会让 JSX 层级变深，可读性下降；现在多数情况用 Hook 替代更轻量
Fragment 嵌套不加 key，列表嵌套必须加 key
>或map循环中，就必须显式加key。错误示例：
{list.map(item =>—— 这里 Fragment 缺 key，React 无法区分顺序，可能引发状态错乱。{item.title}
{item.desc}
>)}- Fragment 本身不支持
key属性，得把 key 放在它的第一个子元素上（比如...
- 如果必须用 Fragment 作 map 返回项，改用带 key 的
- key 必须稳定，别用
Math.random()或index（除非确定列表永不增删/排序）
嵌套本身不难，难的是搞清每个层级的数据流向、更新边界和 React 的 reconciler 怎么看待你的 JSX 结构。最常被忽略的其实是
props.children的类型弹性——它不像 TypeScript 接口那样硬约束，运行时才暴露问题。
