Javascript 警告：不能为功能组件提供参考

我正在使用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;

import React，{useState}来自“React”；
从“./config”导入{APP_NAME}；
从“下一个/链接”导入链接；
进口{
崩溃
导航栏，
纳瓦巴托格勒，
纳瓦巴兰，
导航，
纳维坦，
导航链接，
}从“反应带”；
常量头=（）=>{
常量[isOpen，setIsOpen]=useState（false）；
常量切换=（）=>setIsOpen（！isOpen）；
返回(
{APP_NAME}
报名
签名
);
};
导出默认标题；

---

请给我您宝贵的建议。

来自官方文档：显示了在

链接中包装自定义函数组件的正确方法

在
链接中添加
passHref
属性

用
React.forwardRef
包装自定义函数组件
但是，
NavbarBrand
不是您可以操作的组件。您可以创建一个自定义组件来包装
navbarrand
。它可能像

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>

const CustomNavbarBrand=React.forwardRef（（{onClick，href}，ref）=>{
返回(
点击我
)
})
{APP_NAME}

检查可传递给
NavbarBrand
的有效属性，因为我以前没有使用过
reactstrap
。
来自官方文档：显示了在
链接中包装自定义函数组件的正确方法

在
链接中添加
passHref
属性

用
React.forwardRef
包装自定义函数组件
但是，
NavbarBrand
不是您可以操作的组件。您可以创建一个自定义组件来包装
navbarrand
。它可能像

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>

const CustomNavbarBrand=React.forwardRef（（{onClick，href}，ref）=>{
返回(
点击我
)
})
{APP_NAME}

检查可传递给
navbarrand
的有效属性，因为我以前没有使用过
reactstrap
。
这对我有效：

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


{APP_NAME}

我没有使用NavbarBrand组件，而是添加了类navbar brand，这对我来说很有用：

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


{APP_NAME}

我没有使用NavbarBrand组件，而是添加了navbar brand类
，错误消息表明React.forwardRef可能是解决方案。你考虑过吗？你查过它是怎么工作的吗？我不知道应该在哪里使用React.forwordRef，你能帮我吗！由于错误消息甚至没有提及您共享的代码：不，对不起，现在我已经更新了代码，请告诉我错误在哪里。谢谢。错误消息提示React.forwardRef可能是解决方案。你考虑过吗？你查过它是怎么工作的吗？我不知道应该在哪里使用React.forwordRef，你能帮我吗！由于错误消息甚至没有提及您共享的代码：不，对不起，现在我已经更新了代码，请告诉我错误在哪里。非常感谢。