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

87

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

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

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

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

有办法吗？

html reactjs

— 杰克·艾伦
source

1

为什么这与反应有关？

— Marcelo Bezerra 2014年

1

尚不清楚您要做什么。你想刚刚替换所有的空格&nbspl;，你想显示HTML标签字面上还是有别的东西，你想干什么？

— Bojangles 2014年

这取决于何时 myValue可以访问。您可以在适当的生命周期函数中等待它，对其进行解析并设置一个parsed阻止多次解析的标志。

— David Hellsing 2014年

如果您想渲染＆nbsp; 在没有反应的情况下，您将需要使用该dangerouslySetInnerHTML方法。我真的没有办法解决这个问题，因为您可以使用javascript创建一个字符串，以＆nbsp;代替空格。但是如果不使用该dangerouslySetInnerHTML方法，它们将通过react逃脱。

— Mike Driver

233

代替使用 HTML实体，可以使用 引用（U + 00A0 NON-BREAKING SPACE）的Unicode字符：

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

— 索菲·阿尔珀特（Sophie Alpert）
source

3

请注意，您在上面使用的Unicode字符已被浏览器列入黑名单，因为它被网络钓鱼方案滥用。请参阅kb.mozillazine.org/Network.IDN.blacklist_chars

— Perry Tew

2

@BenAlpert好点。是。很好的一点。就我所知，IDN只是地址。

— 佩里·图

简单而有效。即使在发布3年后也要@@ BenAplert。

— YASH DAVE

当没有其他事情时，这对我有用。谢谢您的帮助！

— davidawad

2

该黑名单适用于域名，而不适用于HTML代码。

— JW。

34

我知道这是一个老问题，它不能完全满足您的要求，但是与其编辑字符串，不如通过CSSwhite-space: nowrap属性更好地解决您想要实现的问题：

在html中：

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

在反应：

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

— 阿德里安·麦克尼尔（Adrian Macneil）
source

谢谢！这是更好的答案。就我而言（一堆我不想包装的链接，但我也不想在一行上），我在{content：''; white-space：normal}

— 乍得·斯蒂尔

0

如果要显示漂亮的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>
)

— 汤米
source

0

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

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

— 瑞安·贝德尔（Ryan Berdel）
source

不起作用：

Warning: The tag <nbsp> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

— Ross Attrill

0

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

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

— 拉吉
source

-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

— 旅团
source