当前位置：首页 > article >正文

React 插入不转义的html

article 2024/10/9 19:20:22

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

查看全文

http://www.kler.cn/news/340205.html