标签在React中可用，但不可嵌套等块级元素，因HTML规范限定其仅允许短语级内容；浏览器会静默修复DOM导致样式错位、JS查询失败及SSR hydration异常。

标签在 React 中能用，但嵌套逻辑必须严格符合 HTML 规范——它不能包

、

等块级元素，否则 JSX 编译或浏览器解析时会静默修复 DOM，导致样式错位、JS 查询失败、SSR hydration 异常。

为什么

里不能放

或

HTML 规范明确定义：

的“允许内容”仅限**短语级内容**（phrasing content），比如文本、、、、（带 alt），不包括任何块级元素。
React 不做语义校验，但底层浏览器会自动“纠错”：遇到

xxx

，会把

提到

外面，并闭合

，结果 DOM 变成：

<p></p>
<div>xxx</div>

这会导致：

• CSS 选择器如 p > div 永远不匹配
• document.querySelector('p').textContent 可能为空
• SSR 渲染后客户端 hydration 失败（服务端 DOM 和客户端 DOM 结构不一致）

React 中怎么安全地组织段落内容

多数场景下，你真正需要的不是“把东西塞进

React 组件生成器

根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

”，而是“让文字有段落语义 + 灵活布局”。这时应切换思路：

• 纯文本段落 → 直接用
  ，子节点只用字符串、、 等合法 phrasing 元素
• 想包裹标题+描述+按钮？别用

  标题

  内容
  ，改用语义化组合：
  或
  作容器，内部各用独立
  、
  、
• 需要内联样式隔离？用 替代
  包住块级结构
• 组件封装段落逻辑？函数组件返回

  {children}

  是安全的，但调用方传入的 children 必须是合法 phrasing 内容（可用 React.Children.toArray(children) 做类型兜底）

常见报错和调试线索

这类问题通常不抛红屏错误，而是表现为“样式没生效”“JS 找不到节点”“首屏闪动”。排查时重点关注：

• Chrome DevTools Elements 面板中，右键检查目标
  ，看它实际包裹了什么——如果里面空空如也，或旁边多出一个孤零零的
  ，基本就是被浏览器自动拆解了
• 对比 SSR 输出的 HTML（查看页面源码）和客户端渲染后的 DOM 结构是否一致
• 运行 document.querySelectorAll('p').forEach(p => console.log(p.innerHTML))，观察是否返回意外空值
• 禁用 JavaScript 后直接看源码，确认原始 JSX 是否已违反嵌套规则

最易被忽略的一点：React 组件名大小写敏感，

（大写）会被当作自定义组件，而
（小写）才是原生标签。写错大小写不会报语法错，但可能触发未定义组件警告，干扰判断。