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

时间:2020-07-05 04:29:15

标签: javascript html reactjs jsx whitespace

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

还有,有人知道为什么选择添加它吗?

1 个答案:

答案 0 :(得分:1)

使用样式interface Details { name: string; gender: string; } class Person { name: string; gender: string; constructor({ name, gender }: Details) { this.name = name; this.gender = gender; } } const person = new Person({ name: "John", gender: "male", }); console.log(person);

working demo

whitespace: pre-wrap