Reactjs 材料界面+；盖茨比谷歌分析插件：“；不能为功能组件提供参考；材质Ui链接环绕OutBoundLink的警告

我想将插件中的OutboundLink组件包装到Material UI链接组件中

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

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)
    ...

Material UI文档对此进行了讨论，并链接到有关如何解决此问题的

我不知道如何解决这个问题

因为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>
  );
};

从“@material ui/core”导入{Link as MuiLink}；
const ForwardOutboundLink=React.forwardRef（（props，ref）=>(
));
export const OutboundLinkThemed=（{href，target，rel，caption}）=>{
返回(
{标题}
);
};

---

到目前为止，渲染的组件工作正常，所以我在最后几天忽略了它。但我无法在我的应用程序中不断累积警告。如何解决此问题？

以下内容消除了警告（使用forwardRef，但不将

ref

放在

OutboundLink

上，因为它不支持此警告）：

const ForwardOutboundLink=React.forwardRef（（props，ref）=>(
));

理想的解决方案是在中修复此问题，以便它使用

forwardRef

，然后在

a

标记上指定ref

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