React google-recaptcha "ref“类型错误在ref类型记录中

Question

我正在尝试从reCaptcha类型的脚本项目中实现不可见的react google-recaptcha

我把包的类型按

yarn add @types/react-google-recaptcha

但是，当我想实现组件时，我在这里得到一个类型脚本错误

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

这是错误的内容

键入'MutableRefObject‘不能指定键入'LegacyRef \未定’。键入“MutableRefObject”不能指定键入“刷新对象”。属性“当前”的类型不兼容。

Answer 1

只需给它一个null的初始值。它以undefined作为当前实现中的初始值。

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

// ....

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

解释：

通过查看类型，ref属性期望类型如下所示：

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

即

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

其中RefObject是：

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

因此，current的值应该是某种类型或null。

Answer 2

根据他们的文档：不可见reCAPTCHA，您只需要正确地键入recaptcha，就可以避免可能的类型记录错误。

通常，您不使用executeAsync方法，您可以使用React.createRef (因为Response16.3)并以这种方式键入recaptcha：

import ReCAPTCHA from "react-google-recaptcha";

const recaptchaRef = React.createRef<ReCAPTCHA>()
 
ReactDOM.render(
  <form onSubmit={() => { recaptchaRef.current.execute(); }}>
    <ReCAPTCHA
      ref={recaptchaRef}
      size="invisible"
      sitekey="Your client site key"
      onChange={onChange}
    />
  </form>,
  document.body
);

此外，您还可以使用executeAsync方法来使用基于承诺的方法。然后，您可以这样避免类型记录错误：

import ReCAPTCHA from "react-google-recaptcha";
 
 
const ReCAPTCHAForm = (props) => {
  const recaptchaRef = React.useRef<ReCAPTCHA>();
 
  const onSubmitWithReCAPTCHA = async () => {
    const token = await recaptchaRef?.current?.executeAsync();
 
    // apply to form data
  }
 
  return (
    <form onSubmit={onSubmitWithReCAPTCHA}>
      <ReCAPTCHA
        ref={recaptchaRef as React.RefObject<ReCAPTCHA>}
        size="invisible"
        sitekey="Your client site key"
      />
    </form>
  )
 
}