React不识别DOM元素上allowTransparency属性的问题咨询

告警产生原因 #

• React 17对原生DOM元素的属性有严格校验规则，只有符合React定义的标准DOM属性名才会被识别并正常渲染到页面上。allowTransparency是不符合规范的驼峰写法，原生HTML中iframe对应的透明属性实际为全小写的allowtransparency，因此React会抛出不识别该属性的告警。
• 驼峰写法的allowTransparency不会被React写入到实际生成的DOM节点中，透明属性未生效，就会出现iframe黑色背景的异常表现。

解决方案 #

将iframe的属性allowTransparency={true}替换为全小写的allowtransparency="true"即可，修改后的完整代码如下：

<iframe
    width="100%"
    height="100%"
    frameBorder="0"
    title="Spline 3D Animation"
    allowtransparency="true"
    style={{ backgroundColor: "transparent" }}
    src="https://my.spline.design/portfolio-fe0fd4b29cba7bfea175804f995a9f8a/"
>
</iframe>

如果修改属性后iframe依然显示黑色背景，可确认嵌入的Spline页面发布时是否配置了背景透明，确保目标页面本身未设置不透明的背景色。

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