ReactJS呈现不间断空格的字符串

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

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

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

因为我首先必须用其标记替换所有HTML实体。我不想这样做,它似乎太低了。

有办法吗?

宝儿村村2020/03/13 15:34:54

除了使用&nbsp;HTML实体,您还可以使用Unicode不间断空格字符:

<div>{myValue.replace(/ /g, "\u00a0")}</div>
梅老丝2020/03/13 15:34:54

要删除字符串之间的空格,下面的代码对我有用。例如:“ afee dd”结果:“ afeeded”

{myValue.replace(/ \ s + / g,'')}
宝儿小哥小卤蛋2020/03/13 15:34:54

好吧,在这里很难消失而不消失,因此我添加了一些空白,以便每个人都可以看到。如果您从此标签<nbsp />中删除空格,则可以在React中使用不间断的空格。

React将这个JSX标签转换为一个不间断的空间。奇怪的问题:也必须在要间隔的文字的同一行上使用。另外,带有此标签的不间断空格不会在React中堆叠。

小胖Sam2020/03/13 15:34:54

因此,您拥有一个类似于“ 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