NextJS > Function 组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？ [复制]答案

【问题标题】：NextJS > Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? [duplicate]NextJS > Function 组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？ [复制]
【发布时间】：2021-12-01 15:45:29
【问题描述】：

我正在尝试使用“下一个/链接”中的链接组件来包装卡片组件。当我单击卡片时，它应该将我带到链接，但它没有这样做。相反，我收到一个警告'不能给函数组件提供参考。尝试访问此 ref 将失败。我该如何解决这个问题？

代码如下：

<div className="flex justify_between align_center flex_wrap mb_2 ">
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => (
      <Link href="/blog-details" key={item}>
        <BlogCard />
      </Link>
    ))}

【问题讨论】：

您是否尝试过将passHref 属性添加到Link 组件？
是的，工作量不大
您的BlogCard 组件是什么样的？

标签： javascript reactjs next.js jsx

【解决方案1】：

您的问题实际上在官方文档中已有说明。您可能需要检查所有案例以查看您属于哪种案例。这在很大程度上取决于您的<BlogCard /> 结构。然后你可以forwardhref和ref到你的自定义组件。

https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-functional-component

【讨论】：