鏈接在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創建它