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

Posted 2023-02-22

【中文标题】ReactJS 使用不间断空格渲染字符串

【英文标题】：ReactJS render string with non-breaking spaces

【发布时间】：2014-08-17 10:15:45

【问题描述】：

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

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

<div dangerouslySetInnerhtml=__html: myValue />

因为我首先必须用它们的标记替换任何 HTML 实体。不想做这个，好像太低级了。

有什么办法可以做到吗？

【问题讨论】：

为什么这和 react 有关系？

您想要做什么并不完全清楚。你想只是用&nbspl;替换所有空格，你想按字面显示HTML标签还是你想做其他事情？

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

如果要渲染  通过 react 未转义到 dom，您将需要使用 dangerouslySetInnerHTML 方法。我真的没有看到解决方法，因为您可以使用 javascript 创建一个字符串，用   替换空格。但如果不使用 dangerouslySetInnerHTML 方法，这些将被 react 转义。

【参考方案1】：

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

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

【讨论】：

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

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

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

这对我有用，但没有其他方法。感谢您的帮助！

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

【参考方案2】：

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

myValue.replace(/\s+/g, '')

【参考方案3】：

嗯，在此处输入很难不消失，因此我添加了一些空格，以便每个人都可以看到。如果你从这个标签 中删除空格，那么你将能够在 React 中使用不间断的空格。

React 将这个 JSX 标签翻译成一个不间断的空格。奇怪的怪癖：这也必须与您想要间隔的文本在同一行上使用。此外，带有此标签的不间断空格不会在 React 中堆叠。

【讨论】：

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

【参考方案4】：

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

【参考方案5】：

我知道这是一个老问题，这并不完全符合您的要求，但您想要实现的目标可能是使用 CSS white-space: nowrap 属性更好地解决，而不是编辑字符串：

在html中：

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

在反应中：

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

【讨论】：

谢谢！这是更好的答案。在我的情况下（一堆我不想换行的链接，但我也不想在一行上），我添加了 a::after content:' ';空白：正常

如果您想将一些单词（即名称）放在一起，而其他单词要换行，我认为这不起作用。使用<p style=word-wrap: nowrap>Edgar Woolf, Noel Langley, Florence Ryerson</p>，没有任何东西会包裹，并且字符串会溢出容器。在这种情况下，dangerouslySetInnerHTML 似乎是在特定单词之间选择性地应用  的唯一选项。

一方面，您需要使用 whiteSpace:nowrap 而不是 word-wrap:nowrap。其次，一种更安全的方法是对您不想换行的单词使用跨度，或者作为其他答案之一建议您只能替换  使用 unicode 等效项（而不是允许字符串中包含任意 html，这是一个很大的安全风险）。

【参考方案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>;

jsbin