React为何不渲染空白字符？如何显示仅含空格的字符串

为什么空格不显示？ #

浏览器渲染HTML时，会自动合并或忽略无意义的空白字符（包括单个空格、换行符这些）。你模板里输出的单个空格，会被浏览器直接判定为无效空白，所以不会显示出来。

怎么实现空格显示？ #

给你几个实用的解决方式：

1. 用HTML非换行空格实体 #

把普通空格换成 ，这是浏览器会识别的空格字符。注意如果用的是Vue这类框架的双大括号插值，会自动转义HTML实体，所以得改用v-html指令：

<h1 v-html="errors.email?.message || '&nbsp;'"></h1>

2. 用CSS强制保留空白 #

给<h1>加个CSS样式，让它保留空白字符：

h1 {
  /* 保留空白，文本不自动换行 */
  white-space: pre;
  /* 要是需要自动换行，就用这个：white-space: pre-wrap; */
}

之后原来的模板代码就能正常显示空格了：

<h1>{errors.email?.message || ' '}</h1>

3. 绑定文本内容（框架场景） #

如果是Vue这类框架，也可以用v-text绑定内容，配合上面的CSS样式，同样能让空格显示出来，不过用 加v-html是最直接的方式。

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