ReactJS渲染string与不间断空格

我有一些道具有一个可以包含＆的字符的string。 它也包含空格。 我想使用  。

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

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

因为我首先必须用它们的标记replace任何HTML实体。 我不想这样做，看起来水平太低了。

有什么办法可以做到这一点？

Answer 1

而不是使用  HTML实体，你可以简单地使用Unicode非破空间字符：

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

Answer 2

我知道这是一个古老的问题，这并不完全符合你的要求，而是编辑string，你想要达到的目标可能会更好地使用CSS white-space: nowrap属性来解决：

在html中：

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

在反应：

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

Answer 3

如果你想显示一个漂亮的XML：

 var str = "<test>\n\t\t<value>1</value>\n</test>\n".replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\t/g, "\u00a0").replace(/\n/g, '<br/>'); return ( <div dangerouslySetInnerHTML={{__html: str}} ></div> ) 

Answer 4

所以你有这样的价值“Hello world”，我们会说this.props.value 。

你可以这样做：

 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}>&nbsp;</span>); } // remove the trailing nbsp array.pop(); return <div>{array}</div>; 

jsbin