Question

我有一些道具有一个字符串，可以包含像＆amp;这样的字符。它还包含空格。我想用 替换所有空格。

我能做到这一点吗？请记住，我不能只使用这种语法进行渲染：

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

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

我有办法做到这一点吗？

Answer 1

您可以简单地使用Unicode不间断空格字符，而不是使用  HTML实体：

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

Answer 2

我知道这是一个老问题，而且这并不完全符合您的要求，但是您可以使用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

很难在这里键入而不消失，所以我添加了一个空白，以便每个人都可以看到。如果从此标签中删除空格，则可以在React中使用一个不间断的空格。

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

Answer 5

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

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

Answer 6

所以你有一个类似“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>;

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

6 个答案:

jsbin