在React中正确渲染HTML标签

Question

I have to create a text module in React, i'm using JSX too; I will receive the data from a JSON file. For example:

{ "text-data": "text": "<small> Hello world </small>" }

I tried to do something like this in my module: <p> {this.props.textData.text}</p>

When I try to render this in my JSX file, it show as plain text with the tags included. I've been researching and I found that I could use this function "Dangerously Set innerHTML" but it's not recommended because it can cause an XSS attack. I read here other answers about this, that say that using HTML entities work; but I can't make that work for now.

Answer 1

The dangerouslySetInnerHTML prop is there for cases like this. In effect, you're saying that you completely trust the html that you're outputting and that it's valid html. You would not want to use it for user input (unless absolutely necessary and thoroughly validated).

See the React documentation for more information. There is also a previous similar StackOverflow question .