reactjs - 在 React 渲染元素中保留空间

Question

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

但是，呈现的元素缺少值。

例子:

const a = "I am a text string"

不同于:

const a = "I  am a text string"

(注意“我”和“我”之间的额外空格。

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

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

Answer 1

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

white-space: pre-wrap;

工作演示: wmnk7rmq8 - CodeSandbox