React: Raw HTML tag in content

问题

I am working on a React app. There is some dynamic content which contents HTML tags. When I am showing that content on the page, it's showing with raw HTML tag.

For say:

const msg = "Some <strong>text</strong> here"

I want to show like this on page Some text here

If I use dangerousHtml then it's showing like this without bold "Some text here"

Can anyone please help?

Thanks in advance!

回答1:

You can use the 'dangerouslySetInnerHTML' like:

const msg = () => ({__html: 'Some <strong>text</strong> here'});

and use it in your code like:

<div dangerouslySetInnerHTML={createMarkup()} />

For reference for 'dangerouslySetInnerHTML' read this:

dangerouslySetInnerHTML

回答2:

yarn add raw-html-react

or

npm install raw-html-react

import ReactHtml from 'raw-html-react';

const html = `<div data-react-component="MyComponent"></div>`;
return <ReactHtml html={html} componentMap={{ MyComponent }} />;

来源：https://stackoverflow.com/questions/50683608/react-raw-html-tag-in-content