React JSX中如何渲染API返回的HTML格式对象值？

在React里直接渲染HTML字符串时，出于安全考虑，React会自动转义所有HTML标签，所以你看到的是纯文本格式的列表。要让浏览器正常解析这段HTML有序列表，可以使用dangerouslySetInnerHTML属性。

具体用法示例： #

假设你的state里存储HTML内容的字段是recipeSteps，可以这样在JSX中渲染：

<div dangerouslySetInnerHTML={{ __html: this.state.recipeSteps }} />

注意事项： #

• dangerouslySetInnerHTML的命名是为了提醒你：如果HTML内容来自不可信的源（比如未验证的API、用户输入），可能会引入XSS攻击风险。如果你的API数据源是可信的，可放心使用；若不可信，建议先对HTML内容进行过滤危险标签和脚本的处理。
• 确保传入的__html值是格式正确的完整HTML字符串，否则可能导致渲染异常。

内容的提问来源于stack exchange，提问作者trizdog