警告：函数组件不能被赋予 refs答案

【问题标题】：Warning: Function components cannot be given refs警告：函数组件不能被赋予 refs
【发布时间】：2021-03-01 11:38:22
【问题描述】：

我正在使用 Next.js 最新版本来制作我的博客网站，不知道为什么显示错误，当我尝试制作我的表单时，然后显示如下错误：

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

我试过下面的代码：

import React, { useState } from "react";
import { APP_NAME } from "../config";
import Link from "next/link";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from "reactstrap";

const Header = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <div>
      <Navbar color="light" light expand="md">
        <Link href="/">
          <NavbarBrand className="font-weight-bold">{APP_NAME}</NavbarBrand>
        </Link>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="m-auto" navbar>
            <NavItem>
              <Link href="/signup">
                <NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
              </Link>
            </NavItem>
            <NavItem>
              <Link href="/signin">
                <NavLink style={{ cursor: "pointer" }}>Signin</NavLink>
              </Link>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
};

export default Header;

请给我您宝贵的建议。

【问题讨论】：

错误消息表明 React.forwardRef 可能是解决方案。你考虑过吗？你查过它是如何工作的吗？
我不知道应该在哪里使用 React.forwordRef，你能帮帮我吗！
由于错误消息甚至没有提到您共享的代码：没有。
对不起，现在我已经更新了我的代码，请告诉我哪里出错了。谢谢。

标签： javascript reactjs next.js

【解决方案1】：

来自官方文档：if-the-child-is-a-function-component 显示了在 Link 中包装自定义函数组件时的正确方法。

在Link 中添加passHref 属性。
使用React.forwardRef 包装您的自定义函数组件。

但是，NavbarBrand 不是您可以操作的组件。您可以创建一个自定义组件来包装NavbarBrand。应该是这样的

const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <NavbarBrand href={href} onClick={onClick} ref={ref}>
      Click Me
    </NavbarBrand>
  )
})

<Link href="/">
  <CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand>
</Link>

检查可以传递给NavbarBrand的有效属性，因为我之前没有使用过reactstrap。

【讨论】：

【解决方案2】：

最简单的解决方案可能是用原生 html 元素包装您的 NavLink。在你的情况下：

<Link href="/signup" passHref>
  <a>
    <NavLink style={{ cursor: "pointer" }}>Signup</NavLink>
  </a>
</Link>

【讨论】：

导出导航链接在哪里？
来自“reactstrap”

【解决方案3】：

这对我有用：

<Link href="/">
      <div className="navbar-brand">
        <a>{APP_NAME}</a>
      </div>
    </Link>

我没有使用 NavbarBrand 组件，而是添加了类 navbar-brand

【讨论】：