在React中正确渲染HTML标签

Question

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

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

我试图在我的模块中执行以下操作： <p> {this.props.textData.text}</p>

当我尝试在JSX文件中呈现此内容时，它显示为包含标签的纯文本。 我一直在研究，发现可以使用此功能“危险地设置innerHTML”，但不建议使用此功能，因为它可能导致XSS攻击。 我在这里阅读了有关此问题的其他答案，即使用HTML实体有效； 但我暂时无法进行这项工作。

Answer 1

危险的 SetInnerHTML道具可以在这种情况下使用。 实际上，您是说您完全信任要输出的html，并且它是有效的html。 您不希望将其用于用户输入（除非绝对必要且经过充分验证）。

有关更多信息，请参见React文档 。 前面也有类似的StackOverflow问题 。