将 js 字符串文字和 html 传递到组件并保留 html

Question

我有一个对象数组，其中每个对象都传递到一个子组件中。该对象的值之一是作为字符串文字的文本 blob。该 blob 包含 HTML 链接。我想在子组件中保留此链接。它看起来是这样的......

`This is my text literal with a ${<a href="http://link.com">Link</a>}.`

我还尝试像这样动态创建一个反应对象：

`This is my text literal with a ${React.createElement('a', { href: 'https://link.com' }, 'Link')}.`

这两者都呈现如下：

这是我的带有 [object Object] 的文本文字。

我如何让它显示链接？

Answer 1

立即计算未标记的模板文字（它不是字符串文字）并生成字符串。在模板中，您将创建一个链接元素并将其嵌入到该字符串中，以便toString调用该方法。您将看到默认的结果toString, [object Object]。

您无法将模板传递到组件中。您可以传入包含链接的片段：

<>This is my text literal with a <a href="http://link.com">Link</a>.</>

这是 React v16.2+ 语法。如果您使用的是较旧的版本，则可能必须React.Fragment直接使用（v16+）。

如果你使用的是 v16 之前的东西，你不会有碎片；通常的解决方案是spanor div（span在这种情况下我会说）：

// v15 and earlier
<span>This is my text literal with a <a href="http://link.com">Link</a>.</span>