React实战 | JSX的空格与换行不显示问题的解决方案 React

空格显示不正常这是因为浏览器显示机制，会将连续多个空格显示成1个空格。

在这些示例中，HTML和JSX中的空格是一样的 Hello?World ?Hello?World ??Hello?World ???Hello?World??? Hello???World

虽然JSX在在HTML中渲染多个空格，但是浏览器仍然会压缩空格序列。（假定CSS的white-space属性是默认值：normal）。

??Hello?World??? // 开头和结尾处的空格被移除 Hello?World

有两种解决方案：

换行显示不正常项目中遇到后台返回数据存在换行符却无法正常换行
有两种解决方案：

data.split('\n').map((item, id) => { return ( ={id}> {item} ) })

结合两个问题一起解决，只需把CSS样式设置成

white-space: pre-wrap;

white-space解释
white-space的值：

连续的空白符会被合并，换行符会被当作空白符来处理。填充line盒子时，必要的话会换行。

和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

连续的空白符会被保留。在遇到换行符或者

元素时才会换行。

连续的空白符会被保留。在遇到换行符或者

元素，或者需要为了填充line盒子时才会换行。

连续的空白符会被合并。在遇到换行符或者

元素，或者需要为了填充line盒子时会换行。

white-space各个值的表现如下：

文章图片
【React实战 | JSX的空格与换行不显示问题的解决方案】参考资料：
white-space MDN文档

React实战 | JSX的空格与换行不显示问题的解决方案