如何将引用传递给动态加载的组件

Question

我想将一个引用传递给一个动态加载的组件。当组件用常规导入加载时，一切都按预期工作。在使用动态导入时，ref值是undefined || { current: null }。

我在控制台中得到以下错误消息：

Warning: Function components cannot be given refs. 
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

我曾尝试使用React.forwardRef，但没有成功。

父组件： Recaptcha.tsx

import React from 'react';
import loadable from '@loadable/component';
import ReCAPTCHA from 'react-google-recaptcha';

export type RecaptchaProps = {
  handleOnError: () => void;
  handleOnExpire: () => void;
  forwardedRef: React.MutableRefObject<ReCAPTCHA | null>;
  error: string | null;
  load: boolean;
};

const Recaptcha: React.FunctionComponent<RecaptchaProps> = ({
  handleOnError,
  handleOnExpire,
  error,
  forwardedRef,
  // load,
}) => {
  const RecaptchaPackage = loadable(
    () => import('components/Form/Recaptcha/RecaptchaPackage'),
  );

  return (
    <div>
      <RecaptchaPackage
        handleOnError={handleOnError}
        handleOnExpire={handleOnExpire}
        forwardedRef={forwardedRef}
      />
    </div>
  );
};

export default React.memo(Recaptcha);

动态组件： RecaptchaPackage.tsx

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

export type RecaptchaPackageProps = {
  handleOnError: () => void;
  handleOnExpire: () => void;
  forwardedRef: React.MutableRefObject<ReCAPTCHA | null>;
};

const RecaptchaPackage: React.FunctionComponent<RecaptchaPackageProps> = ({
  handleOnError,
  handleOnExpire,
  forwardedRef,
}) => {
  return process.env.GATSBY_RECAPTCHA_PUBLIC ? (
    <ReCAPTCHA
      onErrored={handleOnError}
      onExpired={handleOnExpire}
      ref={forwardedRef}
      sitekey={process.env.GATSBY_RECAPTCHA_PUBLIC}
      size="invisible"
    />
  ) : null;
};

export default React.memo(RecaptchaPackage);

Answer 1

您希望通过两个父元素向上传递ReCAPTCHA组件的参考(来自‘react’)。为此，您可以使用React的forwardRef。

另外要注意的是，ref并不总是在组件挂载上分配一个值，这在使用动态加载和不使用动态加载时都是正确的。因此，如果要记录ref以进行测试，请登录setTimeout或稍后触发的其他事件。

Recaptcha组件如下所示：

import React from "react";
import loadable from "@loadable/component";
import ReCAPTCHA from "react-google-recaptcha";

export type RecaptchaProps = {
  handleOnError: () => void;
  handleOnExpire: () => void;
  error: string | null;
  load: boolean;
};

const RecaptchaPackage = loadable(() => import("./RecaptchaPackage"));

const Recaptcha: React.FunctionComponent<RecaptchaProps> = React.forwardRef(({
  handleOnError,
  handleOnExpire,
  error,
  // load,
}, ref) => {
  return (
    <div>
      <RecaptchaPackage
        ref={ref}
        handleOnError={handleOnError}
        handleOnExpire={handleOnExpire}
      />
    </div>
  );
})

export default React.memo(Recaptcha);

您的RecaptchaPackage组件应该如下所示：

import React from "react";

import ReCAPTCHA from "react-google-recaptcha";

export type RecaptchaPackageProps = {
  handleOnError?: () => void;
  handleOnExpire?: () => void;
};

const RecaptchaPackage: React.FunctionComponent<RecaptchaPackageProps> = React.forwardRef(({
  handleOnError,
  handleOnExpire
}, ref) => {
  return process.env.GATSBY_RECAPTCHA_PUBLIC ? (
    <ReCAPTCHA
      ref={ref}
      onErrored={handleOnError}
      onExpired={handleOnExpire}
      sitekey={process.env.GATSBY_RECAPTCHA_PUBLIC}
      size="invisible"
    />
  ) : null);
});

export default React.memo(RecaptchaPackage);

我已经创建了一个沙箱来验证这一点是否有效：https://playcode.io/972680