使用 React 变量语句 (JSX) 插入 HTML

Question

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

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

并将它插入到这样的反应中，并让它工作吗？

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

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

原文由 Kyle Hotchkiss 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 dangerouslySetInnerHTML ，例如

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

原文由 Douglas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

如果您不能 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>
    );
}

原文由 Yo Wakita 发布，翻译遵循 CC BY-SA 4.0 许可协议