带有使用 ES6 模板的链接的文本答案

【问题标题】：Text with a link using ES6 template带有使用 ES6 模板的链接的文本
【发布时间】：2017-12-21 13:19:54
【问题描述】：

我想显示“我已阅读并同意隐私政策。隐私政策”。文本和其中的“隐私政策”部分必须是链接。

我在下面尝试过，但输出是“我已阅读并同意 [object object]。”

const privacyLink = <a href="">Privacy Policy</a>;
{`I read and agree to the ${privacyLink}`}

如何使用字符串模板做到这一点？

【问题讨论】：

【解决方案1】：

您的问题缺少 JSX 标记，但您显然使用的是 JSX 语法，所以我将根据该解释来回答。

当你编写 JSX 时，你实际上是在告诉你的编译器创建一个函数，例如如果你在 React 中使用 JSX，那么

<a href="">Privacy Policy</a>

是

React.createElement('a', { href: '' }, 'Privacy Policy');

createElement 返回对象，这就是您的字符串模板中显示的内容。

您可以使用字符串模板来构建字符串，因此您在${} 中包含的任何内容都必须是字符串，否则它将被转换为字符串。

你应该继续使用 JSX 语法来编写任何你想包含另一个 JSX 元素的东西。这可能有点棘手，因为任何元素树都需要有一个根元素。一般来说，使用<span> 是非常安全的，所以在这种情况下：

<span>I read and agree to the {privacyLink}</span>

【讨论】：

【解决方案2】：

privacyLink 缺少引号。模板文字语法不正确。将privacyLink 定义为字符串，定义一个单独的模板文字，包括privacyLink。

const privacyLink = "<a href=>Privacy Policy</a>";
const template = `I read and agree to the ${privacyLink}`;

document.body.innerHTML += template;

或者简单地将privacyLink定义为字符串并使用+=运算符和.innerHTML设置document中元素的.innerHTML

const privacyLink = "I read and agree to the <a href=>Privacy Policy</a>";

document.body.innerHTML += privacyLink;

【讨论】：