在 React 中,字符串作为内容插入到 JSX 中,默认会被转义。这是为了防止 执行恶意代码,XSS(跨站脚本攻击)等安全问题。
如果想要 HTML 不被转义,可以使用dangerouslySetInnerHTML属性。
举例:
import React from 'react';interface Props {htmlContent: string;
}const HtmlOutput: React.FC<Props> = ({ htmlContent }) => {return (<div dangerouslySetInnerHTML={{ __html: htmlContent }} />);
};// 使用示例
const App: React.FC = () => {const rawHtml = "<span>这是未转义的HTML</span>";return (<div><HtmlOutput htmlContent={rawHtml} /></div>);
};export default App;