React 插入不转义的html

y523648

于 2024-10-08 17:26:50 发布

阅读量138

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/y523648/article/details/142764918

版权

在 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;