在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

dangerouslySetInnerHTML 道具适用于此类情况。实际上，您说完全信任您输出的html及其有效的HTML。您不希望将其用于用户输入（除非绝对必要且经过彻底验证）。

有关详细信息，请参阅React documentation。还有一个类似的StackOverflow question。