React中如何将接收的JSON数据转换为HTML标签并渲染？

你当前使用JSON.stringify会把带HTML标签的内容转成纯文本，自然无法渲染出FONT样式，要实现标签的正常渲染，可使用React提供的dangerouslySetInnerHTML属性。

具体实现代码 #

直接将JSON中的HTML字符串传入dangerouslySetInnerHTML的__html字段即可：

// 渲染Element_000的内容
<div dangerouslySetInnerHTML={{ __html: setData.Element_008.value?.Element_000 }} />

// 渲染Element_001的内容
<div dangerouslySetInnerHTML={{ __html: setData.Element_008.value?.Element_001 }} />

注意事项 #

• dangerouslySetInnerHTML的命名带有"dangerously"前缀，是因为如果渲染的内容包含不可信的用户输入，可能引发XSS攻击。如果你的数据来自可信的后端接口，无需担心这个风险。
• 不需要使用JSON.stringify处理数据，直接传入原始字符串值即可，后端返回的<和>会被自动解析为<和>。

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