NextJS > 函数组件不能被赋予 refs。尝试访问此 ref 将失败。您是要使用 React.forwardRef() 吗？

Question

我正在尝试使用 'next/link' 中的 Link 组件包装卡片组件。当我点击卡片时，它应该将我带到 link，但它并没有这样做。相反，我收到一条警告“无法为函数组件提供引用。尝试访问此 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

NextJS > 函数组件不能被赋予 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()?

javascript

jsx

reactjs

next.js