React为何会移除行首的空格实体？

问题场景 #

HTML中的表现 #

以下HTML代码会在a和b之间显示空格：

a
<span>
  &#32;b
</span>

浏览器渲染后结果为：a b

React中的表现 #

但在React中使用相同写法时，空格会被莫名移除：

ReactDOM.render((
  <div>
    a
    <span>
      &#32;b
    </span>
  </div>
), document.querySelector('.test'))

依赖脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div class="test"></div>

渲染后结果为：ab。移除span标签内的换行可临时解决，但代码较长时Prettier会自动格式化回带换行的写法，且这种行为和HTML表现不一致。

原因解析 #

核心差异在于React和原生HTML对文本节点空白字符及HTML实体的处理规则不同：

• 原生HTML：浏览器会将元素内的连续空白字符（换行、空格、制表符）合并为单个空格，同时HTML实体（如 ）会被正确解析为对应字符（此处为普通空格）。因此代码中的换行、缩进和 最终会共同形成可见的空格。
• React JSX：
  1. 会自动修剪文本节点首尾的空白字符（包括换行、空格、制表符），你的代码中span内的换行和缩进属于前导空白，会被全部移除；
  2. 默认不会自动解析文本中的HTML实体， 会被当作普通字符串处理，而非转换为空格。
     两者结合导致a和b之间没有可见空格。

解决方法 #

要在React中稳定显示空格，不受代码格式化影响，推荐以下方式：

• 直接在JSX中写入空格：

  <div>
    a
    <span> b</span>
  </div>
  

• 使用大括号包裹空格字符（更直观，避免格式化时被移除）：

  <div>
    a
    <span>{' '}b</span>
  </div>
  

• 若需要控制多空格或保留格式，可通过CSS的white-space: pre-wrap属性实现：

  <div style={{ whiteSpace: 'pre-wrap' }}>
    a
    <span>
      {' '}b
    </span>
  </div>
  

内容的提问来源于stack exchange，提问作者riv