反应中的p标签内的链接

Question

我有一段括在artist.bio.summary中的段落。此变量包含有关艺术家的所有详细信息。这是从其他地方获取的。我在p标记内打印出来。

我的问题是p标记内的a标记内有一个链接。 a标记是这样的;

 <a href="https://www.abc.xyz/music/xxx">Read more </a>

p标记只打印出来，而不是给我一个点击链接。 我应该怎么做才能采取相应行动？

我将此属性称为如下：

<p>{artist.bio.summary}</p>


let artist = {
            bio: { summary: '' }
        };

我最初将此artist.bio.summary设置为字符串。

我得到的示例字符串如下：

"hello <a href="https://www.abc.xyz/music/xxx">Read more </a> there"

以上字符串是我收到后artist.bio.summary的内容

Answer 1

这是一个安全问题，React（默认情况下）不允许这样做，因此预期它不会评估嵌入式html标记，但如果你真的想要，它们会有一个解决方法。 dangerouslySetInnerHTML

<p dangerouslySetInnerHTML={artist.bio.summary}></p>

但是请阅读注射攻击，以便在使用这种动态逃避之前了解其后果。 https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection

Answer 2

根据您的说明，artist.bio.summary似乎包含整个内容，即<a href="https://www.abc.xyz/music/xxx">Read more </a>。在这种情况下，您需要的是dangerouslySetInnerHTML

<p dangerouslySetInnerHTML={{__html: artist.bio.summary}}/>

但是我建议你修改数据，这样你就不会将HTML实际传递给React组件，而是自己用JSX创建它