链接在ap标签中

Question

I have a paragraph that is enclosed in artist.bio.summary . This variable contains all the details about an artist. This is fetched from somewhere else. I am printing this out inside a p tag.

My problem is there is a link inside this p tag within a a tag. The a tag is like this;

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

The p tag just prints this out rather than giving me a link to click. What should I do to act accordingly?

I am calling this property as below:

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


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

I had set this artist.bio.summary as a string initially.

And an example string that i am getting is below:

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

The above string is the content of the artist.bio.summary once i received it

Answer 1

This is a security issue and is not allowed by React (by default) so it's as expected to not evaluate the embedded html markup, but they have a workaround if you really want to. dangerouslySetInnerHTML

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

But please read up on injection attacks so you understand the consequences before using this kind of dynamic evals. https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection

Answer 2

From you description it seems that artist.bio.summary contains the entire content ie <a href="https://www.abc.xyz/music/xxx">Read more </a> . In that case what you need is dangerouslySetInnerHTML

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

However I would suggest you to make modifications to your data such that you aren't actually passing the HTML to the React component but creating it using JSX yourself