链接在ap标签中

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标记，但是如果您确实想要的话，它们可以提供解决方法。 危险地设置内部HTML

<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是dangerouslySetInnerHTML

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

但是我建议您对数据进行修改，以使您实际上不会将HTML传递给React组件，而是自己使用JSX创建它