防止jsx凝白的解决方案space

Solution to prevent jsx from condensing white space

显然,默认情况下,jsx 将多个空白字符合并为一个空白字符。我希望能够在渲染时保留真实的文本、空格和所有内容。

我有一个解决方案,但我不是很满意,希望有人有更优雅的解决方案。

这是我目前的情况。

((text)=>

(<span>
  {(text =>
  text
  .split('')
  .map(c =>
  c.charCodeAt(0) == 32 ? <span>&nbsp;</span> : <span>{c}</span>
  )
  )(text)}
</span>)

)('This has lots of whitespace ')

此外,有人知道他们为什么选择添加这个吗?

使用样式whitespace: pre-wrap

working demo

<p style={{ whiteSpace: "pre-wrap" }}>This has lots of whitespace </p>}