将带有 html 的 js 字符串文字传递到组件中并保留 html
passing js string literal with html into component and retain html
我有一个对象数组，其中每个对象都被传递到一个子组件中。该对象的值之一是作为字符串文字的文本 blob。此 blob 包含 HTML links。我想在子组件中保留这个 links。这是它的样子...
`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 对象] 的文本文字。
我如何让它显示 link？
未标记的模板文字（它不是字符串文字）会被立即评估并生成一个字符串。在您的模板中，您正在创建一个 link 元素并将其嵌入到该字符串中，因此会调用 toString 方法。您看到的是默认 toString、[object Object].
的结果
您不能将模板传递到组件中。您可以传入包含 link:
的片段
<>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>
我有一个对象数组，其中每个对象都被传递到一个子组件中。该对象的值之一是作为字符串文字的文本 blob。此 blob 包含 HTML links。我想在子组件中保留这个 links。这是它的样子...
`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 对象] 的文本文字。
我如何让它显示 link？
未标记的模板文字（它不是字符串文字）会被立即评估并生成一个字符串。在您的模板中，您正在创建一个 link 元素并将其嵌入到该字符串中，因此会调用 toString 方法。您看到的是默认 toString、[object Object].
您不能将模板传递到组件中。您可以传入包含 link:
的片段<>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>