reactjs - React/Typescript 无法识别 iframe 属性

Question

我正在尝试使用 MyOwnComponent 嵌入一个播放带有 frameborder 和 allowfullscreen 属性的 Vimeo 的 iframe，如下所示:

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>接口(interface)和变量声明。

该接口(interface)实际上具有属性 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。

别担心，我也花了一段时间才发现它!