＆＃x201D;警告：无法给出功能组件参考。＆＃x201c;在NextJ中使用自定义组件时出错

Question

我有一个Headericon组件，看起来像这样：

function HeaderIcon({ inactiveIcon, activeIcon }) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div onClick={() => setIsActive(!isActive)}>
      {isActive ? activeIcon : inactiveIcon}
    </div>
  );
}

export default HeaderIcon;

当我运行代码时，我会收到这些错误：

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

我检查了控制台并看到了：

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

这是我使用headericon的地方。 ：

function Header() {
  return (
    <IconContext.Provider value={{ size: "30", color: "#374957" }}>
      <header className="flex items-center justify-around py-1.5 px-3 bg-white">
        <div className="flex items-center space-x-2 w-full max-w-xs">
          <h1 className="text-4xl">Zipp</h1>
        </div>

        <div className="py-2.5 px-4 flex items-center">
          <InputGroup>
            <InputLeftElement
              pointerEvents="none"
              children={<SearchIcon color="grey" />}
            />
            <Input
              type="text"
              bg="whitesmoke"
              w={"full"}
              focusBorderColor="none"
              border={"none"}
              placeholder="Search"
            />
          </InputGroup>
        </div>

        {/* right */}
        <div className="flex items-center space-x-6">
          <div className="headerIcons active:opacity-80">
            <Link href="/">
              <HeaderIcon
                inactiveIcon={<AiOutlineHome />}
                activeIcon={<AiFillHome />}
              />
            </Link>
          </div>

          <div className="headerIcons">
            <HeaderIcon
              inactiveIcon={<MdOutlineAddBox />}
              activeIcon={<MdAddBox />}
            />
          </div>
          <div className="headerIcons -rotate-12">
            <HeaderIcon
              inactiveIcon={<AiOutlineNotification />}
              activeIcon={<AiFillNotification />}
            />
          </div>

          <div className="cursor-pointer">
            <Avatar w={7} h={7} />
          </div>
        </div>
      </header>
    </IconContext.Provider>
  );
}

Answer 1

由于您在Next.js的链接标签中添加功能组件，因此可以进行一些更改。这是文档：

如果链接的孩子是功能组件，除了使用passhref，您还必须将组件包装在react.forwardref.forwardref中。

这意味着，首先，您应该在使用Headericon时将passhref prop prop prop prop ，

<Link href="/" passHref>
   <HeaderIcon
      inactiveIcon={<AiOutlineHome />}
      activeIcon={<AiFillHome />}  
    />
</Link>

然后将headericon更改为以下代码。请注意，我正在使用userOuter从Next.js使用来处理活动状态和不活动状态。

import { useRouter } from "next/router";
const HeaderIcon = ({ onClick, href, inactiveIcon, activeIcon }, ref) => {
  const router = useRouter();
  return (
    <a href={href} onClick={onClick} ref={ref}>
      <div>{router.pathname ? activeIcon : inactiveIcon}</div>
    </a>
  );
};
export default React.forwardRef(HeaderIcon);

Answer 2

function HeaderIcon(props) {
  const [isActive, setIsActive] = useState(false);

  const { inactiveIcon, activeIcon } = props;

  return (
    <div onClick={() => setIsActive(!isActive)}>
      {isActive ? activeIcon : inactiveIcon}
    </div>
  );
}

export default HeaderIcon;

我希望这对您有帮助。谢谢