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

Question

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

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

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

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

所以它被渲染为文字字符串，我想要的是左边的文本是粗体，而另一边的文本是一个实际的超链接。有没有办法做到这一点？

标签： htmlpython-3.xreactjs

Answer 1

React 故意阻止了这一点。请参阅文档。

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

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

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