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

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

（（文本）=>
(
{（文本=>
文本
.拆分（“”）
.map（c=>
c、 charCodeAt（0）=32？：{c}
)
)（案文）}
)
)（‘这有很多空白’）

---

还有，有人知道他们为什么选择添加这个吗？

使用样式

空格：pre-wrap

这有很多空白
}

我知道必须有更好的解决方案。非常感谢。