反应中的p标签内的链接

时间:2017-10-18 08:43:06

标签: html reactjs

我有一段括在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的内容

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

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

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

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