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

html HTML

Tom卡卡西

2020-03-13

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

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

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

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

有办法吗？

第1392篇《ReactJS呈现不间断空格的字符串》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

宝儿村村 2020.03.13

除了使用 HTML实体，您还可以使用Unicode不间断空格字符：

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

梅老丝 2020.03.13

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

{myValue.replace（/ \ s + / g，''）}

宝儿小哥小卤蛋 2020.03.13

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

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

小胖Sam 2020.03.13

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