Html ReactJS 呈现带有不间断空格的字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24432576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS render string with non-breaking spaces
提问by Hyman Allan
I have some props that has a string that could contain characters such as &.
It also contains spaces. I want to replace all spaces with .
我有一些道具的字符串可以包含诸如 & 之类的字符。它还包含空格。我想用 .
Is there an easy way I can do this? Bear in mind that I cannot just render using this syntax:
有没有一种简单的方法可以做到这一点？请记住，我不能仅使用以下语法进行渲染：
<div dangerouslySetInnerHTML={{__html: myValue}} />
because I would first have to replace any HTML entities with their markup. I don't want to have to do this, it seems too low level.
因为我首先必须用它们的标记替换任何 HTML 实体。我不想这样做，它似乎太低级了。
Is there a way I can do this?
有没有办法做到这一点？
回答by Sophie Alpert
Instead of using the HTML entity, you can use the Unicode character which refers to (U+00A0 NON-BREAKING SPACE):
您可以不使用 HTML 实体，而是使用 引用 (U+00A0 NON-BREAKING SPACE)的 Unicode 字符：
<div>{myValue.replace(/ /g, "\u00a0")}</div>
回答by Adrian Macneil
I know this is an old question, and this doesn't exactly do what you asked for, but rather than editing the string, what you want to achieve is probably be solved better using the CSS white-space: nowrapattribute:
我知道这是一个老问题，这并不完全符合您的要求，但不是编辑字符串，您想要实现的可能是使用 CSSwhite-space: nowrap属性更好地解决：
In html:
在 HTML 中：
<div style="white-space: nowrap">This won't break lines</div>
In react:
在反应：
<div style={{ whiteSpace: 'nowrap' }}>{myValue}</div>
回答by Tommy
If you want to display a pretty xml:
如果要显示漂亮的 xml：
var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '<').replace(/>/g, '>').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>');
return (
<div dangerouslySetInnerHTML={{__html: str}} ></div>
)
回答by Ryan Berdel
Well it's very hard to type on here without it disappearing, so I'm adding a little whitespace so everyone can see it. If you remove the whitespace from this tag < nbsp />, then you'll be able to use a non-breaking space in React.
好吧，在这里打字而不消失是非常困难的，所以我添加了一点空白，这样每个人都可以看到它。如果您从此标记中删除空格 < /> ，那么您将能够在 React 中使用不间断空格。
React translates this JSX tag into a non-breaking space. Weird quirk: This must also be used on the same line as the text you want to space. Also, non-breaking spaces with this tag don't stack in React.
React 将这个 JSX 标签翻译成一个不间断的空间。奇怪的怪癖：这也必须与要空格的文本在同一行上使用。此外，带有此标签的不间断空格不会在 React 中堆叠。
回答by Raj
To remove space in between string, below code works for me. eg: "afee dd " result: "afeedd"
要删除字符串之间的空格，下面的代码对我有用。例如：“afee dd”结果：“afeedd”
{myValue.replace(/\s+/g, '')}回答by Brigand
So you have a value like this "Hello world", and we'll say it's in this.props.value.
所以你有一个像“Hello world”这样的值，我们会说它在this.props.value.
You can do this:
你可以这样做：
var parts = this.props.value.split(" "), array = [];
for (var i=0; i<parts.length; i++){
// add the string
array.push(<span key={i * 2}>{parts[i]}</span>);
// add the nbsp
array.push(<span key={i * 2 + 1}> </span>);
}
// remove the trailing nbsp
array.pop();
return <div>{array}</div>;
