如何在不使用“dangerouslySetInnerHTML”的情况下安全地在 React 中渲染原始 HTML？

使用更安全的方法在 React 中渲染原始 HTML

在 React 中，您现在可以使用更安全的方法渲染原始 HTML，避免使用危险的SetInnerHTML 。这里有四个选项：

1。 Unicode 编码

使用 Unicode 字符表示 UTF-8 编码文件中的 HTML 实体：

<div>{`First \u00b7 Second`}</div>

2. JSX 字符串中的 Unicode 数字

将 HTML 实体转换为 JSX 字符串中的 Unicode 数字：

<div>{`First ` + String.fromCharCode(183) + ` Second`}</div>

3。字符串和 JSX 元素的混合数组

组合字符串和 JSX 元素来渲染复杂的 HTML：

<div>{[`First `, <span>&middot;</span>, ` Second`]}</div>

4. DangerouslySetInnerHTML 作为最后的手段

仅使用angerouslySetInnerHTML 作为最后的手段，因为它会引入潜在的安全漏洞：

<div dangerouslySetInnerHTML={{__html: `First &middot; Second`}} />

以上是如何在不使用“dangerouslySetInnerHTML”的情况下安全地在 React 中渲染原始 HTML？的详细内容。更多信息请关注PHP中文网其他相关文章！