次のように、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
<HTMLIFrameElement>
StackOverflow で他の同様の問題を調査した後、Typescript の lib.d.ts ファイルを調べて、インターフェースと変数の宣言を確認することにしました。
インターフェースには実際にプロパティframeborder
とallowfullscreen
型がありますが、それでもエラーがスローされます。webkitallowfullscreen
andに対してのみエラーがスローされるのであれば理解できます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;
}
ベストアンサー1
ファイルを見るとわかるように、ではなく でlib.d.ts
ある必要があります。frameBorder
frameborder
心配しないでください。私もそれを見つけるのに少し時間がかかりました!