下一页 JS> 函数组件不能被赋予引用。尝试访问此引用将失败。你的意思是使用 React.forwardRef() 吗？

Question

我正在尝试使用'next/Link '中的Link组件包装卡片组件。当我点击卡片时，它应该带我到链接，但它没有这样做。相反，我得到一个警告'函数组件不能给予refs。尝试访问此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>
))}

Answer 1

你的问题实际上在官方文档中有说明。你可能需要检查所有的情况，看看你是哪一种情况。这很大程度上取决于你的<BlogCard />结构。然后您可以将forward、href和ref添加到您的自定义组件。

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