React / Typescript无法识别iframe属性

Question

我正在尝试嵌入一个播放带有框架边框的Vimeo的iframe，并使用MyOwnComponent使其具有全屏属性，如下所示：

const MyOwnVimeoComponent = () => {
return (
    <div>
        <iframe 
            src="https://player.vimeo.com/video/VIMEOID" 
            width="640" 
            height="360" 
            frameborder="0" 
            webkitallowfullscreen 
            mozallowfullscreen 
            allowfullscreen
        ></iframe>
    </div>
);}

但是，我得到的错误是：

[ts] Property 'frameborder' does not exist on type 'HTMLProps<HTMLIFrameElement>'

同为webkitallowfullscreen，mozallowfullscreen和allowfullscreen

在研究了StackOverflow上的其他类似问题之后，它使我检查了Typescript的lib.d.ts文件并查看了<HTMLIFrameElement>接口和变量声明。

实际上，接口确实具有属性frameborder和allowfullscreen类型，但是仍然会引发错误。我会理解它是否仅对和引发了错误webkitallowfullscreen，mozallowfullscreen但我通常对这里发生的事情感到困惑。

如果有人能指出我正确的方向，将不胜感激。

供参考，这似乎是lib.d.ts文件的相关部分：

interface HTMLIFrameElement extends HTMLElement, GetSVGDocument {
align: string;
allowFullscreen: boolean;
allowPaymentRequest: boolean;
border: string;
readonly contentDocument: Document;
readonly contentWindow: Window;
frameBorder: string;
frameSpacing: any;
height: string;
hspace: number;
longDesc: string;
marginHeight: string;
marginWidth: string;
name: string;
noResize: boolean;
onload: (this: HTMLIFrameElement, ev: Event) => any;
readonly sandbox: DOMSettableTokenList;
scrolling: string;
src: string;
vspace: number;
width: string;
addEventListener<K extends keyof HTMLIFrameElementEventMap>(type: K, listener: (this: HTMLIFrameElement, ev: HTMLIFrameElementEventMap[K]) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

declare var HTMLIFrameElement: {
    prototype: HTMLIFrameElement;
    new(): HTMLIFrameElement;
}

Answer 1

如您在lib.d.ts文件中看到的，它应该是frameBorder，而不是frameborder。

不用担心，我也花了一段时间才发现它！

Answer 2

请参阅键入文件的以下属性...

    interface IframeHTMLAttributes<T> extends HTMLAttributes<T> {
        allow?: string;
        allowFullScreen?: boolean;
        allowTransparency?: boolean;
        frameBorder?: number | string;
        height?: number | string;
        marginHeight?: number;
        marginWidth?: number;
        name?: string;
        sandbox?: string;
        scrolling?: string;
        seamless?: boolean;
        src?: string;
        srcDoc?: string;
        width?: number | string;
    }