ReactJS使用不间断空格渲染字符串

Question

我有一些道具,其中包含一个字符串,可以包含&等字符.它还包含空格.我想替换所有空格 .

有一种简单的方法可以做到这一点吗？请记住,我不能只使用以下语法进行渲染:

<div dangerouslySetInnerHTML={{__html: myValue}} />

因为我首先必须用他们的标记替换任何HTML实体.我不想这样做,看起来水平太低了.

有没有办法可以做到这一点？

Answer 1

 您可以简单地使用Unicode不间断空格字符,而不是使用HTML实体:

<div>{myValue.replace(/ /g, "\u00a0")}</div>

该黑名单适用于域名，而不是 HTML 代码。 (4认同)
Sweeeeeeet.谢谢. (2认同)
请注意,上面使用的unicode字符被浏览器列入黑名单,因为它被网络钓鱼方案滥用.见http://kb.mozillazine.org/Network.IDN.blacklist_chars (2认同)
@BenAlpert好点.是.很好的一点.就我所知,IDN解决了这个问题. (2认同)

Answer 2

我知道这是一个老问题,这并不完全符合你的要求,但是你不想编辑字符串,你可以使用CSS white-space: nowrap属性更好地解决你想要实现的问题:

在html中:

<div style="white-space: nowrap">This won't break lines</div>

反应:

<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>