React中渲染html结构---dangerouslySetInnerHTML

在React中，你可以使用dangerouslySetInnerHTML属性来渲染HTML结构。这个属性名字很长，所以通常我们会把它和一个简单的别名一起使用，比如html。

这里是一个简单的例子：

function createMarkup(html) {
  return { __html: html };
}
 
function MyComponent({ htmlContent }) {
  return (
    <div dangerouslySetInnerHTML={createMarkup(htmlContent)} />
  );
}
 
// 使用组件
const htmlContent = '<strong>这是粗体文本</strong>';
ReactDOM.render(<MyComponent htmlContent={htmlContent} />, document.getElementById('root'));

在这个例子中，MyComponent接收一个htmlContent属性，它是将要被渲染的HTML字符串。createMarkup函数接收HTML字符串并返回一个对象，这个对象有一个特殊的__html属性，它包含了原始的HTML。

dangerouslySetInnerHTML属性接收这个对象，并把它的HTML内容设置到组件的innerHTML中。

请注意，使用dangerouslySetInnerHTML可能会带来跨站脚本攻击(XSS)的风险，因此只在你能够确信内容是安全的情况下使用它。如果你需要渲染用户提供的内容，请确保对内容进行清洗处理，例如使用库如DOMPurify。