Material UI + плагин Gatsby Google Analytics: предупреждение «Компонентам функций нельзя давать ссылки» для упаковки материалов UI OutBoundLink

Question

Я хочу обернуть компонент OutboundLink из плагина Gatsby Google Analytics в компоненте Ссылка на интерфейс материалов.

В консоли появляется следующее сообщение об ошибке:

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

Check the render method of `ForwardRef`.
    in OutboundLink (created by ForwardRef)
    in ForwardRef (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography)) (created by ForwardRef(Link))
    in ForwardRef(Link) (created by WithStyles(ForwardRef(Link)))
    in WithStyles(ForwardRef(Link)) (created by OutboundLinkThemed)
    in OutboundLinkThemed (created by Credibility)
    in p (created by ForwardRef(Typography))
    in ForwardRef(Typography) (created by WithStyles(ForwardRef(Typography)))
    in WithStyles(ForwardRef(Typography)) (created by MyOwnComponent)
    ...

Документация по интерфейсу материалов обсуждает это здесь и ссылки на Документацию React о том, как ее решить.

Я в растерянности, как решить эту проблему.

Я пробовал это решение , которое не работает, поскольку OutboundLink не имеет свойства innerRef.

Я также пробовал это, которое по-прежнему выдает предупреждение:

import { Link as MuiLink } from "@material-ui/core";

const ForwardOutboundLink = React.forwardRef((props, ref) => (
  <OutboundLink {...props} ref={ref}>
));

export const OutboundLinkThemed = ({ href, target, rel, caption}) => {

  return (
    <MuiLink
      component={ForwardOutboundLink}
      href={href}
      target={target}
      rel={rel}
      underline="hover"
    >
        {caption}
    </MuiLink>
  );
};

Пока визуализированные компоненты работают как положено, поэтому я проигнорировал это в последние дни.Но я не могу накапливать предупреждения в моем приложении.Как мне это решить?

Answer 1

Следующее избавляется от предупреждения (используя forwardRef, но не , помещая ref в OutboundLink, поскольку оно не поддерживает его):

const ForwardOutboundLink = React.forwardRef((props, ref) => (
  <OutboundLink {...props} />
));

Идеальным решением было бы исправить это в OutboundLink в плагине , чтобы он использовал forwardRef, а затем указать ссылку на aтег.