How to render html tags in react

React method of rendering html tags: You can use the dangerousSetInnerHTML attribute to render, such as [<div dangerousSetInnerHTML={{__html: textCotent}}></div>].

The operating environment of this tutorial: windows10 system, react16 version. This method is suitable for all brands of computers.

(Learning video sharing: react video tutorial)

Method introduction:

If the string content of one end of the HTML tag is obtained from the backend ( textContent) needs to be rendered in the form of a tag, then we can use the dangerousSetInnerHTML attribute, but there will be a risk of xss attacks after using this attribute:

<div dangerousSetInnerHTML={{__html: textCotent}}></div>

Other methods recommended:

function createMarkup() {
  return {__html: 'First     Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()}></div>;
}

Related recommendations ：js tutorial

The above is the detailed content of How to render html tags in react. For more information, please follow other related articles on the PHP Chinese website!