防止jsx压缩空白​​的解决方案

Question

显然，默认情况下，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 ')

另外，有谁知道他们为什么选择添加这个？

Answer 1

使用样式whitespace: pre-wrap

working demo

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