Question

我正在尝试使用像这样的MyOwnComponent来嵌入一个iframe，它使用frameborder和allowfullscreen属性来播放Vimeo：

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;
    }

React / Typescript无法识别iframe属性

2 个答案: