React 将粘贴的 html 渲染为标签，而不是字符串

Question

我有一个简单的问题。我目前正在后端使用 Python 开发 React 应用程序。在 Python 方面，我解析了一些 html 文件，并从中提取了一些 html 标签。然后它被打包成一个 JSON 并发送到前端。所以 React 应用会收到这样的信息：

{'<b>id</b>': '<a href="https://example.com?foo=42">Link</a>'}

所以这些就像字符串形式的原始 html 标签。现在我想渲染它们。这会发生：

这就是它在开发工具下的样子：

所以它被呈现为文字字符串，我想要的是左侧的文本是粗体，而另一侧的文本是一个实际的超链接。有办法吗？

Answer 1

React 有意阻止这种情况。 See the docs。

一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间将您的用户暴露给跨站点脚本 (XSS) 攻击。

您仍然可以使用dangerouslySetInnerHTML 来完成它。将以下测试 div 替换为包含 html 的变量。

const test = "<div>TEST</div>";
return <div dangerouslySetInnerHTML={{__html: test }} />;