javascript 警告：无法为函数组件指定引用

5anewei6 于 2022-12-25 发布在 Java

关注(0)|答案(7)|浏览(195)

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

请给予我提宝贵的建议。

JavaScript

来源：https://stackoverflow.com/questions/66421459/warning-function-components-cannot-be-given-refs

7条答案

按热度按时间

nkoocmlb1#

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

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

赞(0）回复(0）举报 2022-12-25

mxg2im7a2#

从官方文件来看：if-the-child-is-a-function-component显示了在Link中 Package 定制函数组件的正确方法。
1.在Link中添加passHref属性。
1.用React.forwardRef Package 定制函数组件。
但是，NavbarBrand不是一个可以操作的组件，可以创建一个自定义组件来 Package NavbarBrand。

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

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

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

赞(0）回复(0）举报 2022-12-25

jk9hmnmh3#

这对我很有效：

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

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

赞(0）回复(0）举报 2022-12-25

ycggw6v24#

将子组件 Package 在a（锚）标记中解决了我的问题。
重现步骤：
1.使用Next JS中的Link标记环绕元件
从"next/link"导入链接从"next/image"导入图像

<Link href="/">
<Image  width="100%"
       height="100%"
       src="/logo.png"
       alt="Blitztech Electronics Logo" />
<Link>

溶液：
1.传递"important" passHref属性
1.将整个子项封装在a标记中

赞(0）回复(0）举报 2022-12-25

cig3rfwq5#

有一个更好的方法来解决这个问题：无论何时你要在Link标签下添加一个子标签，比如一个Image标签，只要把它们放在一个div或一个标签下就行了。2下面是一个例子：

<Link href="/">
              <div>
                <Image
                  src={Logo}
                  alt={TagName.COMPANY_NAME}
                  width={80}
                  height={80}
                  onClick={handleClicked}
                />
              </div>
   </Link>

赞(0）回复(0）举报 2022-12-25

xurqigkl6#

溶液：
1.* * 带锚点标记的换行**（标记）
1.使用passHref属性

<Link href='/' passHref>
  <a>
    <Image src='logo.png' width="50px" height="50px" />
  </a>
</Link>

赞(0）回复(0）举报 2022-12-25

e5njpo687#

只要把它包在锚标签里，它就会工作得很好。

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

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 警告：无法为函数组件指定引用

7条答案

相关问题

热门标签

最新问答