Next.js: 下一步9-使用功能组件作为<link/>引起引用警告

创建于 2019-07-12 · 32评论 · 资料来源: vercel/next.js

错误报告

描述错误

将功能组件用作<Link/>的子代会导致：

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

仅在从v8 => v9升级后才发生这种情况。

重现

复制回购： https :

预期行为

<Link/>应该与功能组件一起使用/不显示警告。

系统信息

Next.js版本：9.0.1

bug

资料来源

nickluger

👍57 👀6

最有用的评论

手动包装Link使用的所有功能组件？难道不应该有一个更简单，重复性更小的解决方案吗？至少像<Link href="/" forwardRef>...</Link> ？

nickluger 于 2019-08-09

👍71

所有32条评论

同样在这里。如果使用这样的自定义组件，则会出错：

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

仅在将组件用作子组件时才会发生这种情况。这些不发出警告，例如：

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

mustaphaturhan 于 2019-07-12

👍6 🎉4 ❤3

有没有办法解决这个错误？当我们确实希望利用某些功能（例如打字稿支持）时，我们将无法使用9。只是注意到它升至9.0.3：/

joaogarin 于 2019-07-16

您可以尝试暂时将其静音，例如：

// TODO: Muting error, fix as soon as zeit/next.js/issues/7915 resolved
const originalError = console.error;

console.error = (...args) => {
  if (/Warning.*Function components cannot be given refs/.test(args[0])) {
    return;
  }
  originalError.call(console, ...args);
};

nickluger 于 2019-07-16

😄34 👎24 🎉4

我在这里有同样的问题。

focux 于 2019-07-16

如果您使用<Link/>包装您的自定义组件，则可以像这样转发ref ：

const CustomComponent = React.forwardRef(function CustomComponent(props, ref) {
  return (
    <div/>
  );
});

<Link href={"/"}>
  <CustomComponent/>
</Link>

警告消失。

paulboony 于 2019-07-25

👍14

我已更新为9.0.4-canary.2但在控制台上仍然收到警告。我想念什么吗？

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 `Link`.

th0th 于 2019-08-09

@ th0th您应该将组件包装在React.forwardRef 。像这个：

import React from 'react'
import Link from 'next/link'

const CustomComponent = React.forwardRef((props, ref) => (
  <a ref={ref} {...props}>
    Click
  </a>
))

export default () => (
  <Link href='/' passHref>
    <CustomComponent/>
  </Link>
)

mustaphaturhan 于 2019-08-09

👍4

手动包装Link使用的所有功能组件？难道不应该有一个更简单，重复性更小的解决方案吗？至少像<Link href="/" forwardRef>...</Link> ？

nickluger 于 2019-08-09

👍71

同意@nickluger，这似乎违反直觉。

tm1000 于 2019-08-20

是否所有其他库都应以相同方式实现forwardRef属性？或者，也许是有反应的创建者认为开发人员将使用React.forwardRef函数而不是实现forwardRef属性？

srghma 于 2019-08-20

是的，同意@nickluger ，对Link所有组件手动执行此操作很麻烦。

DonovanCharpin 于 2019-08-29

👍11

我们应该重新打开并重命名此问题（@ijjk），还是有人已经打开了一个新的问题？

nickluger 于 2019-09-16

👍2

同样在这里。如果使用这样的自定义组件，则会出错：

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

仅在将组件用作子组件时才会发生这种情况。这些不发出警告，例如：

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

这很可能会引发控制台错误：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

bschwartz757 于 2019-09-26

👍3

我只是在升级Next JS时遇到了这个问题。有没有解决的办法？

我不确定我是否了解如何使用forwardRef和包装我的组件。我的button.js文件当前导出以下内容...。

const Button = (props) => {
    return (<stuff />)
}

export default React.memo(Button)

jon64digital 于 2019-10-02

见上文，我在这里打开了后续文件： https :

nickluger 于 2019-10-04

我只是在升级Next JS时遇到了这个问题。有没有解决的办法？
我不确定我是否了解如何使用forwardRef和包装我的组件。我的button.js文件当前导出以下内容...。
const Button = (props) => {
    return (<stuff />)
}

export default React.memo(Button)

在这种情况下，您应该能够

import {forwardRef} from 'react';
const Button = forwardRef(props, ref) => {
    return (<stuff ref={ref} />)
}

对于forwardRef部分。这些文档还提到了https://nextjs.org/docs#forcing -the-link-to-expose-href-to-its-child，尽管我没有尝试过。我发现这样做

            <Link
              href={href}
            >
              <a>
                {text}
              </a>
            </Link>

有效（尽管看起来很奇怪。）

bschwartz757 于 2019-10-04

在9.0.2中遇到此问题

使用<a></a>可能有效，但在使用a11y和类似方法时会触发其他错误，例如“必须具有href”等。

编辑：花了1500万美元试图弄清楚这一点，这很无聊，很浪费时间，尽管有警告，但似乎仍能正常工作。

就个人而言， https： //github.com/zeit/next.js/issues/7915#issuecomment -511792629容易得多。

Vadorequest 于 2019-11-12

使用React片段作为轴承包装的解决方案呢？

import React, { Fragment, useRef } from 'react';
import { MyFunctionalComponent } from './my-functional-component';

const App = props => {
  const myRef = useRef();

  return ( 
    <Link href={href}>
      <Fragment>
          <MyFunctionalComponent ref={myRef} />
      </Fragment>
    </Link>
  );
}

其中<MyFunctionalComponent>转发参考：

import React, { forwardRef } from 'react';

const MyFunctionalComponent = forwardRef(props, ref) => (
  <div ref={ref} />
);

这不会在输出（ <div /> ）中添加任何其他HTML包装器，并且不会触发任何相关错误。

hill84 于 2019-11-14

👎1 👍1

@ hill84有趣，但是在您的示例中myRef来自哪里？

Vadorequest 于 2019-11-14

@Vadorequest我已在先前的评论中添加了更多详细信息。

hill84 于 2019-11-14

👍1

遵循@ hill84的建议是一个不错的解决方法：
```
const ButtonLink：FC=（{{children，href，... props}）=>（
<

tim-codes 于 2020-01-12

👍12 👎10 🚀3 🎉3 ❤2

遵循@ hill84的建议是一个不错的解决方法：

const ButtonLink: FC<ButtonLinkProps> = ({ children, href, ...props }) => (
  <Link href={href}>
    <><Button link {...props}>{children}</Button></>
  </Link>
);

我使用<><Component/></>但链接无法操作。我必须使用<div></div>代替。

namlq93 于 2020-02-26

👍9

我建议一种解决方案，其中函数返回带有props而不是component的对象：

const propsUserBtn = user => ({
    className: "h-10 w-10 font-black rounded-full bg-orange-200 text-teal-700",
    title: user.first_name + ' ' + user.last_name,
    children: (user.first_name.charAt(0) + user.last_name.charAt(0)).toUpperCase()
})

<Link href='/profile'>
    <button { ...propsUserBtn(user) } />   
</Link>

经检查，可以正常工作！

andy-pro 于 2020-03-26

👎2

为什么甚至需要这个裁判？难道是保证的正确位置href在基础包组件时， passHref在使用<Link /> ？

这

mikeyrt16 于 2020-03-27

👍13

或者，如果您需要在组件中指定href的位置，则至少可以选择启用它。 <Link href="/" passHref useRef /> ？

mikeyrt16 于 2020-03-27

我认为不必创建另一个模块来将ref转发到自定义组件是一个很好的解决方案，并且它也很重复。

我用来处理此问题的方式是通过将自定义组件包装为div元素（如@ namlq93所建议的

LauraBeatris 于 2020-07-03

同样在这里。如果使用这样的自定义组件，则会出错：

        <Link href="/href">
          <Button
            type="custom"
            color="#FCFCFC"
          >
             buttonText
          </Button>
        </Link>

仅在将组件用作子组件时才会发生这种情况。这些不发出警告，例如：

        <Link href="/href">
          <button
            type="custom"
            color="#FCFCFC"
          >
            buttonText
          </button>
        </Link>

        <Link href="/href">
          <a>
            <Button
              type="custom"
              color="#FCFCFC"
            >
              buttonText
            </Button>
          </a>
        </Link>

可行，谢谢队友！