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

Question

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

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

我还尝试像这样动态创建一个 react 对象:

`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 之前的东西，你不会有碎片；通常的解决方案是 span 或 div (在这种情况下我会说 span):

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