在 React 渲染元素中保留空间

Question

从我的后端服务返回一个包含空格的字符串。当我console.log在方法中使用此值时render，它会显示带有空格的原始字符串。

然而，渲染的元素缺少值。

例子：

const a = "I am a text string"

不同于：

const a = "I  am a text string"

（注意“I”和“am”之间的额外空格。

渲染方法似乎从我的渲染输出中删除了额外的空间。

这只是一个示例，但我尝试向最终用户显示的原始数据必须包含额外的空间。如何强制 React 渲染原始字符串，而不是对其进行某种文本格式化？

Answer 1

我不确定 React JS 是否会弄乱空间，因为它只是 HTML。在元素上使用以下 CSS：

white-space: pre-wrap;

工作演示： wmnk7rmq8 - CodeSandbox