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

Question

我有一些道具，它们的字符串可能包含 & 等字符。它还包含空格。我想用   替换所有空格。

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

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

因为我首先必须用它们的标记替换任何 HTML 实体。我不想这样做，这似乎太低级了。

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

原文由 Jack Allan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了使用   HTML 实体外，您还可以使用   所指的 Unicode 字符（U+00A0 NON-BREAKING SPACE）：

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

原文由 Sophie Alpert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道这是一个老问题，这并不能完全满足您的要求，但与其编辑字符串，不如使用 CSS white-space: nowrap 属性更好地解决您想要实现的问题：

在 HTML 中：

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

在反应中：

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

原文由 Adrian Macneil 发布，翻译遵循 CC BY-SA 3.0 许可协议