reactjs - Hvordan legge inn en YouTube-iframe ved hjelp av React + TypeScript?

Typescript ser ut til å jobbe imot meg her. Her er det jeg vil bygge inn:

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

Problemet er allow-attributtet:

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

...som er sant, det er ikke i index.d.ts. Hvordan kan jeg tvinge å legge til dette attributtet, eller på en eller annen måte kaste iframe til any type, osv?

Svar #1

Svaret er å endre attributtet fra allow til data-allow.

Svar #2

Hva som fungerte for meg med React 17.0.1 i Gatsby 3.0.1:

lag en index.d.ts-fil i prosjektet ditt. Inkluder denne koden:

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

Bare et eksempel - alle tilgjengelige props kan sees i Youtube Iframe-dokumentasjonen: https://developers.google.com/youtube/player_parameters#origin

pek på indeksfilen i tsconfig.json-filen:

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

Det er det!

Relaterte artikler