时间戳

首页 > 解决方案 > NextJS > Function 组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

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

问题描述

我正在尝试使用“下一个/链接”中的链接组件来包装卡片组件。当我单击卡片时，它应该将我带到链接，但它没有这样做。相反，我收到一个警告'不能给函数组件提供参考。尝试访问此 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>
    ))}

标签： javascriptreactjsnext.jsjsx

解决方案

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

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

推荐阅读