在React中正确渲染HTML标签

Question

我必须在React中创建一个文本模块，我也使用JSX;我将从JSON文件接收数据。例如：

{ "text-data": "text": "<small> Hello world </small>" }

我试图做这样的事情我的模块中： <p> {this.props.textData.text}</p>

当我试图使这个在我的JSX文件，它显示为与标签的纯文本包括在内。我一直在研究，我发现我可以使用这个函数“Dangerously Set innerHTML”，但不推荐使用它，因为它可能会导致XSS攻击。我在这里读到关于这个的其他答案，即使用HTML实体工作;但现在我无法完成这项工作。

Answer 1

The dangerouslySetInnerHTML prop有这种情况。实际上，你说你完全信任你输出的html，并且它是有效的html。你不希望将它用于用户输入（除非绝对必要和彻底验证）。

查看React documentation了解更多信息。还有一个以前的类似* question。