时间戳

首页 > 解决方案 > 如何在字符串模板中放置链接？

javascript - 如何在字符串模板中放置链接？

问题描述

不确定这是否是一回事，但我一直试图在 JS 字符串模板中放置一个链接。

我有一个传递给反应组件的对象。属性之一是text：

const someData = {
text: `blah blah blah call <a href="tel:+111222333444"></a> for more information`
}

我想将它作为道具传递给组件并渲染它：

<SomeComponent>{props.text}</SomeComponent>

并让该<a>el 在字符串中呈现为实时链接，就像它被显式放在 DOM 上一样。

我尝试将 分配<a/>给一个变量并对其进行插值，我尝试创建一个返回 DOM 节点的小函数<a>（与我创建许多组件相同）并在插值字符串中调用该函数 - 两种方法都打印实际的 DOM节点作为文本。我用谷歌搜索了一下，看到了一些危险的SetInnerHTML hack，但是它们似乎仍然涉及将该节点嵌入字符串中间，无论危险与否，这对我不起作用。如果可以做到这一点，任何帮助表示赞赏或澄清:)

标签： javascripttemplate-literals

解决方案

function createMarkup() {
  return {__html: 'blah blah blah call <a href="tel:+111222333444"></a> for more information'};
}

function SomeComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

推荐阅读