我正在用 React 构建一些东西，我需要在 JSX 中插入带有 React 变量的 HTML。有没有办法让变量像这样：
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
并像这样将其插入react中，并使其工作？
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
并让它按预期插入 HTML？我还没有看到或听到任何关于可以内联执行此操作的 react 函数，或一种解析允许此操作的方法的任何内容。
您可以使用危险的SetInnerHTML，例如
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
);
}
请注意，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>
);
}
risklySetInnerHTML有很多缺点，因为它设置在标签内部。
为此，我建议您使用一些 react 包装器，就像我在 npm 上找到的一样。 html-react-parser做同样的工作。
import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
render: function() {
return (
<div className="content">{Parser(thisIsMyCopy)}</div>
);
}
很简单的 ：）
通过使用，''您将其变成一个字符串。使用不带引号的逗号可以正常工作。
const span = <span> whatever your string </span>
const dynamicString = "Hehe";
const dynamicStringSpan = <span> {`${dynamicString}`} </span>
render () {
return (
<div>
{span}
{dynamicStringSpan}
</div>
);
}
import { Fragment } from 'react' // react version > 16.0
var thisIsMyCopy = (
<Fragment>
<p>copy copy copy
<strong>strong copy</strong>
</p>
</Fragment>
)
通过使用 '' 将值设置为字符串，React 无法知道它是一个 HTML 元素。您可以执行以下操作让 React 知道它是一个 HTML 元素 -
''，它会工作<Fragment>返回一个HTML元素。