警告:函数组件不能被赋予 refs [英] Warning: Function components cannot be given refs

问题描述

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

警告:函数组件不能被赋予 refs.尝试访问此 ref 将失败.你的意思是使用 React.forwardRef() 吗?

我试过下面的代码:

import React, { useState } from "react";从../config"导入{ APP_NAME }；从下一个/链接"导入链接；进口 {坍塌，导航栏，导航栏切换器，导航栏品牌，导航，导航项，导航链接，} 来自reactstrap"；常量头 = () =>{常量 [isOpen, setIsOpen] = useState(false);常量切换 = () =>setIsOpen(!isOpen);返回 (
<导航栏颜色=浅色"光扩展=md"><链接href="/"><NavbarBrand className="font-weight-bold>>{APP_NAME}</NavbarBrand></链接><NavbarToggler onClick={toggle}/><折叠 isOpen={isOpen} 导航栏><导航类名称=m-auto";导航栏><导航项><链接href="/signup"><NavLink 样式={{ 光标:指针";}}>注册</NavLink></链接></NavItem><导航项><链接href="/signin"><NavLink 样式={{ 光标:指针";}}>登录</NavLink></链接></NavItem></导航></折叠></导航栏></div>);};导出默认标题；

请给我您宝贵的建议.

解决方案

来自官方文档:if-the-child-is-a-function-component 显示了在 Link<中包装自定义函数组件时的正确方式/代码>.

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

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

const CustomNavbarBrand = React.forwardRef(({ onClick, href }, ref) => {返回 (<NavbarBrand href={href} onClick={onClick} ref={ref}>点击我</导航栏品牌>)})<链接href="/"><CustomNavbarBrand>{APP_NAME}</CustomNavbarBrand></链接>

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

I'm using Next.js latest version for making my blog website, don't know why show me error, when I'm trying to make my form then show me error like this:

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

I'm tried below code:

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;

please give me your valuable suggestion.

解决方案

From the official documentation: if-the-child-is-a-function-component shows the right way when you wrap a custom function component within Link.

1. Add passHref attribute in Link.
2. Wrap your custom function component with React.forwardRef.

However, the NavbarBrand is not a component which you can manipulate. You can create a custom component to wrap NavbarBrand. It probably like

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>

Check the valid property which can be passed to NavbarBrand since I haven't use the reactstrap before.

这篇关于警告:函数组件不能被赋予 refs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！