React Hooks - "Function components cannot be given refs" 与 useRef

Question

我正在使用样式组件、FontAwesome 和 React Hooks 为 header/navbar 创建一个图标和标签单元 (Box.js)。在 Box 内部有一个 Container，其中包含 Icon 和 Label。我希望 Icon 和 Label 当您将鼠标悬停在它们的之一上时一起改变颜色，这就是为什么我把 onMouseOver 和 onMouseOut 在 Container 组件上。我松散地跟随 this guide 来实现类似的东西。

在跟随 link 之前，我尝试了这个 useHover 钩子，它没有给我错误消息但没有产生任何效果（当我悬停时甚至没有 console.log 输出）。

我用谷歌搜索了错误消息，但 Github 上的现有 Whosebug 帖子和 React 问题似乎不处理 Hook。其中报告的错误消息也略有不同： Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail. 我的错误消息没有 "stateless."

这里的工作示例：https://codesandbox.io/s/q7rwe

预期：当鼠标悬停在任何一个子元素上时，Container（即Icon和Label）的所有子元素都变为绿色。

实际：我收到以下错误消息 -

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

Check the render method of `Box`.
    in Icon (created by Box)
    in div (created by Context.Consumer)
    in StyledComponent (created by styled.div)
    in styled.div (created by Box)
    in Box (created by App)
    in div (created by App)
    in App

Answer 1

您当前的方法存在一些缺陷。

首先，你不应该给一个功能组件ref。

但是，即使您这样做了，您也无法使用 ref 来更改当前结构的颜色，因为 useEffect 将在渲染后激活并立即使组件的颜色为绿色，因为 ref.current 将存在。

您已经有 isHovered 个状态。只是用它来改变颜色。

我已经更新了您的代码以更好地实现您想要的行为。试试吧！

Box.js

const Box = () => {
  const [isHovered, setHovered] = useState(false);

  return (
    <Container
      onMouseOver={() => setHovered(true)}
      onMouseOut={() => setHovered(false)}
    >
      <Icon isHovered={isHovered} />
      <Label isHovered={isHovered} />
    </Container>
  );
};

Icon.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
const Icon = props => {
  return (
    <FontAwesomeIcon
      icon={faCoffee}
      color={props.isHovered ? "green" : "black"}
    />
  );
};

export default Icon;

Label.js

import React from "react";
const Label = props => {
  return (
    <p style={{ color: props.isHovered ? "green" : "black" }}>
      Label goes here
    </p>
  );
};
export default Label;

https://codesandbox.io/embed/useref-error-xjf48

React Hooks - "Function components cannot be given refs" 与 useRef

React Hooks - "Function components cannot be given refs" with useRef

font-awesome

reactjs

styled-components

react-hooks

Box.js

Icon.js

Label.js