Question

打字稿似乎在这里对我不利。这就是我想要嵌入的内容：

this.observer = new MutationObserver(function(mutations){
  //Do what you want
  for (let mutation of mutations)
    console.log('Mutation detected', mutation);
});

this.observer.observe(this.yourDiv.parentElement, { //Change this.yourDiv by your own HTMLElement.
  attributes: true,
  childList: true, //Important
  subtree: true //Important
});

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

allow

...这是真的，它不在index.d.ts中。如何强行添加此属性，或以某种方式将TS2339: Property 'allow' does not exist on type 'DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>'.强制转换为任何类型等？

Answer 1

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

Answer 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" ]

就是这样！

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

2 个答案: