reactjs - react-google-recaptcha "ref"-typfel i React TypeScript

Jag försöker implementera osynlig reCaptcha från react-google-recaptcha i ett TypeScript-projekt

Jag lade till paketets typ genom

yarn add @types/react-google-recaptcha

men när jag vill implementera komponenten får jag ett TypeScript-fel här

  <ReCAPTCHA
        ref={recaptchaRef} // IN HERE
        size="invisible"
        sitekey="Your client site key"
      />

och detta är felmeddelandets innehåll

 Type 'MutableRefObject<undefined>' is not assignable to type 'LegacyRef<ReCAPTCHA> | undefined'.''
 Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<ReCAPTCHA>'.
 Types of property 'current' are incompatible.

Svar #1

Ge det bara ett initialt värde av null. Det tar undefined som initialt värde i din nuvarande implementering.

const recaptchaRef = useRef(null)
// or
const recaptchaRef = useRef<ReCAPTCHA>(null);

// ....

<ReCAPTCHA
  ref={recaptchaRef}
  size="invisible"
  sitekey="Your client site key"
/>

Förklaring:

Genom att titta på typer, förväntar sig ref-attributet en typ enligt nedan:

(JSX attribute) React.ClassAttributes<ReCAPTCHA>.ref?: string | ((instance: ReCAPTCHA | null) => void) | React.RefObject<ReCAPTCHA> | null | undefined

dvs.

string | ((instance: ReCAPTCHA | null) => void) | React.RefObject<ReCAPTCHA> | null | undefined

där RefObject är:

interface RefObject<T> {
  readonly current: T | null;
}

Så, värdet av current bör vara av någon typ eller null.

Relaterade artiklar