如何在React JS中呈现具有组件的字符串

Question

我有一个字符串，想在react JS 中渲染它

const htmlString = "<h1>
<Ref description="Magic may or may not be happening"> hello magic</Ref></h1>"
return ( <div> <h1>
{htmlString}</h1>
</div>)

我可以在react js中渲染这个htmlString吗？请帮忙！

Answer 1

您可以使用react-html-parser来实现此

import React from 'react';
import ReactHtmlParser from 'react-html-parser';

class HtmlComponent extends React.Component {
render() {
const html = '<div>Example HTML string</div>';
return <div>{ ReactHtmlParser(html) }</div>;
}
}

请参阅此处的文档

Answer 2

您可以在html元素上使用dangerouslySetInnerHTML属性将字符串设置为html。但是要知道，在React中设置这样的HTML是有风险的，因为这可能会让您的用户面临跨站点脚本(XSS(攻击。要了解更多关于如何使用它的信息，请参阅官方React文档：https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

在下面发布一个关于如何使用它的示例用例。

function App() {

function getMarkup() {
return {__html: '<h3>My Content here..</h3>'}; // The HTML string you want to set
}
return (
<div className="App">
<div dangerouslySetInnerHTML={getMarkup()}></div>
</div>
);
}