React中如何传递完整image元素作为props并正确渲染？

问题背景 #

从JSON接口获取的数据中，每个条目包含一个image字段，该字段是完整的<img>标签字符串（包含src、alt等属性）。将这个字段传递给子组件后，页面上只显示纯文本形式的HTML代码，而非实际渲染出图片。

当前使用的子组件代码：

<div className="aspect-[3/2] md:aspect-square overflow-hidden">
    {props.image}
</div>
<span className="block py-5">{props.name}</span>

解决方案 #

方法1：使用dangerouslySetInnerHTML直接渲染HTML字符串

React默认会转义所有HTML字符串，防止XSS攻击。如果确定props.image的内容安全可信，可以用dangerouslySetInnerHTML属性让React直接解析并渲染HTML：

<div 
  className="aspect-[3/2] md:aspect-square overflow-hidden"
  dangerouslySetInnerHTML={{ __html: props.image }}
>
</div>
<span className="block py-5">{props.name}</span>

⚠️ 注意：这个方法存在安全风险，若props.image包含恶意脚本，会直接执行。仅在数据源完全可信时使用。

方法2：拆分HTML属性，手动构建JSX标签（更安全）

如果能协调后端调整JSON返回格式，建议返回<img>标签的独立属性（如src、alt、className等），而非完整的HTML字符串。例如JSON返回结构改为：

{
  "image": {
    "src": "https://example.com/image.jpg",
    "alt": "商品展示图",
    "className": "object-cover w-full h-full"
  },
  "name": "商品名称"
}

此时子组件可以直接构建<img>标签，既安全又灵活：

<div className="aspect-[3/2] md:aspect-square overflow-hidden">
  <img {...props.image} className="object-cover w-full h-full" />
</div>
<span className="block py-5">{props.name}</span>

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