如何将 link 放入字符串模板中？

Question

不确定这是否是一回事，但我一直在尝试将 link 放入 JS 字符串模板中。

我有一个对象被传递给反应组件。其中一个属性是 text:

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

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

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

并让 <a> el 在字符串中呈现为实时 link，就好像它被明确地放在 DOM 上一样。

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

Answer 1

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

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

如何将 link 放入字符串模板中？

How do I put a link in a string template?

javascript

template-literals