使用 React Variable 语句插入 HTML （JSX）

javascript html reactjs

2022-08-30 00:10:47

我正在用 React 构建一些东西，我需要在 JSX 中插入带有 React 变量的 HTML。有没有办法有一个这样的变量：

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

并像这样插入反应，并让它工作？

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

并让它按预期插入HTML？我还没有看到或听说过任何关于可以内联执行此操作的react函数，或者一种可以使其工作的解析方法。

答案 1

你可以使用危险的SetInnerHTML，例如

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

答案 2

请注意，如果您不知道要注入的 HTML 字符串中的内容，则危险的SetInnerHTML可能是危险的。这是因为可以通过脚本标记注入恶意客户端代码。

如果您不能100%确定要渲染的HTML是XSS（跨站点脚本）安全的，那么通过DOMPurify等实用程序清理HTML字符串可能是一个好主意。

例：

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}