错误：React 无法识别 DOM 元素上的 allowTransparency 属性答案

【问题标题】：Bug: React does not recognize the allowTransparency prop on a DOM element错误：React 无法识别 DOM 元素上的 allowTransparency 属性
【发布时间】：2021-09-04 10:41:40
【问题描述】：

我正在使用 iframe：

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

控制台显示：

Warning: React does not recognize the `allowTransparency` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `allowtransparency` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

反应版本：^17.0.2

代码示例链接：完整的代码在这里https://github.com/akashshyamdev/portfolio-latest/blob/master/src/containers/Home/Hero.tsx

当前行为

预期行为

我希望黑色背景是透明的

【问题讨论】：

是allowtransparency（注意：小写）
不行，因为是react，所以一定是allowTransparency
不，你错了
好吧，不是根据打字稿。打字稿说它应该是“allowTransparency”
react props 是驼峰式，而 html 属性是小写。我会在这里停下来，因为这次谈话不会有任何进展。

标签： javascript reactjs iframe

【解决方案1】：

如果 allowtransparency 或 allowTransparency 或任何东西都不起作用，您仍然可以尝试使用 CSS。

iframe {
    background-color: transparent;
}

【讨论】：

【解决方案2】：

应该是`allowtransparency="true"`

但您的 iframe 似乎没有任何透明空间

【讨论】：

“似乎没有任何空间...”是什么意思？我只是想摆脱它周围的黑色东西。
(JSX attribute) allowtransparency: string Type '{ src: string; width: string; height: string; frameBorder: string; allowtransparency: string; allow: string; }' is not assignable to type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'. Property 'allowtransparency' does not exist on type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'. Did you mean 'allowTransparency'?ts(2322)这仍然是VisualStudio的答案

当前行为

预期行为

应该是allowtransparency="true"

应该是`allowtransparency="true"`