反应渲染粘贴 html 作为标签，而不是字符串

Question

I have a quick question. I am currently developing a React app with Python on the backend. On the Python side, I parse some html files, and I extract some html tags from them. Then it gets packed into a JSON and sent to the frontend. So React app receives something like this:

{'<b>id</b>': '<a href="https://example.com?foo=42">Link</a>'}

So those are like raw html tags in form of strings. Now I want to render them. And this happens:

And this is how it looks under dev tools:

So it gets rendered as literal string and what I want is the text on the left side to be bold, and the text on the other side to be an actual hyperlink. Is there a way to do it?

Answer 1

React stops this intentionally. See the docs .

In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

You can still accomplish it by using dangerouslySetInnerHTML . Replace the following test div with your variable holding html.

const test = "<div>TEST</div>";
return <div dangerouslySetInnerHTML={{__html: test }} />;