React中HTML空格“消失”是因自动合并连续空白字符，属DOM规范行为；有效保留方式包括{" "}、{"\u00A0"}、whiteSpace样式及模板字符串配合CSS。
React里HTML空格为什么会“消失”
React会自动合并连续空白字符（包括空格、换行、制表符），这是它基于DOM规范对textContent的默认处理方式，不是bug，而是JSX编译后调用document.createTextNode()时的自然行为。你写多个空格或换行，在渲染结果里基本只剩一个空格。
哪些空格写法在React中有效
想保留空格，不能依赖纯文本中的空格堆叠。以下写法可生效：
- 用
{" "}显式插入React空格节点：JSX中写{" "}会被保留为一个空格字符 - 用
{"\u00A0"}插入不间断空格（ - 用
whiteSpace: 'pre' / 'pre-wrap'样式控制容器，让内部文本尊重原始空白 - 把含空格的文本整个包裹在
{`text with spaces`}中，并配合CSS
常见失效场景和修复示例
下面这些写法看似有空格，实际都会被压缩：
{`// ❌ 这样写，4个空格变成1个
Hello world
// ✅ 正确写法1：显式空格节点
Hello{" "}world
// ✅ 正确写法2：不间断空格
Hello{"\u00A0\u00A0\u00A0\u00A0"}world
// ✅ 正确写法3：CSS控制
Hello world`}
注意：whiteSpace: 'pre'会保留换行和所有空格，但不会自动换行；若需换行，改用'pre-wrap'。
服务端渲染（SSR）和 dangerouslySetInnerHTML 的特殊性
SSR下空格表现和客户端一致——同样会被合并。而dangerouslySetInnerHTML绕过React的文本节点处理，直接注入HTML，此时 、 等实体或whiteSpace样式才真正起效：
{``}
但要注意XSS风险，且无法响应props变化做动态空格控制——这种写法只适合静态、可信内容。
最易被忽略的是：组件嵌套时父组件的children如果是字符串，React依然会先合并其空白再传入子组件，所以空格逻辑要从最外层JSX就开始设计。
