警告：函數組件不能被賦予 refs

Question

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

請給我您寶貴的建議。

Answer 1

最簡單的解決方案可能是使用原生 html 元素包裝您的 NavLink。 在你的情況下：

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

Answer 2

來自官方文檔： if-the-child-is-a-function- component 在Link中包裝自定義 function 組件時顯示正確的方式。

1. 在Link中添加passHref屬性。
2. 使用React.forwardRef包裝您的自定義 function 組件。

但是， NavbarBrand不是您可以操作的組件。 您可以創建一個自定義組件來包裝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 。

Answer 3

這對我有用：

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

我沒有使用 NavbarBrand 組件，而是添加了 class navbar-brand

Answer 4

將子組件包裝在a (anchor) 標記中解決了我的問題。

重現步驟：

1. 使用Next JS中的Link標簽包裹組件

從“下一個/鏈接”導入鏈接 從“下一個/圖像”導入圖像

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

解決方案：

1. 傳遞“重要” passHref屬性

2. 將整個孩子包裝在a標簽中

Answer 5

有一個更好的方法來解決這個問題：每當您要在 Link 標簽下添加子標簽時，例如 Image 標簽，只需將它們包裹在 div 或標簽下即可。 這是示例：

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

Answer 6

解決方案：

1. 用錨標簽（標簽）包裝

2. 使用passHref屬性

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

Answer 7

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

這對我有用。 只需將其包裝在錨標簽中