如何使用 React + Typescript 嵌入 YouTube iframe？答案

【问题标题】：How to embed a YouTube iframe using React + Typescript?如何使用 React + Typescript 嵌入 YouTube iframe？
【发布时间】：2018-07-13 12:57:48
【问题描述】：

Typescript 似乎在这里对我不利。这是我要嵌入的内容：

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/BLAH?showinfo=0" 
    frameBorder="0" 
    allow="autoplay; encrypted-media" 
    allowFullScreen></iframe>

问题是allow属性：

TS2339: Property 'allow' does not exist on type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'.

...这是真的，它不在 index.d.ts 中。如何强制添加此属性，或以某种方式将iframe 转换为任何类型等？

【问题讨论】：

如果移动到 react 16 不是一个选项 - 仍然有一个技巧可以让它工作 - 查看这个问题 stackoverflow.com/questions/31273093/…

标签： reactjs typescript youtube

【解决方案1】：

答案是将属性从allow改为data-allow。

【讨论】：

【解决方案2】：

在 gatsby 3.0.1 中使用 React 17.0.1 对我有用：

在您的项目中创建一个 index.d.ts 文件。包含此代码：

import "react";
    
declare module 'react' {
   export interface IframeHTMLAttributes<T> {
          controls?: 0 | 1
          fs?: 0 | 1
          hl?: string
        }
    }

只是一个例子 - 所有可用的道具都可以在 Youtube Iframe 文档中看到： https://developers.google.com/youtube/player_parameters#origin

指向 tsconfig.json 文件中的索引文件：

"include": ["src/types/global.d.ts" ]

就是这样！

【讨论】：