Question

我正在使用样式组件，FontAwesome和React Hooks为页眉/导航栏创建图标和标签单元（Box.js）。盒子内部有一个Container，其中同时容纳Icon和Label。我希望Icon和Label都在您将鼠标悬停在它们的上时一起改变颜色，这就是为什么我将onMouseOver和onMouseOut放在上面Container组件。我松懈地遵循this guide来实现类似的东西。

在链接之前，我尝试过这个useHover钩子，该钩子没有给我错误消息，但是没有任何效果（悬停时甚至没有console.log输出）。

我已经搜索了错误消息，但看起来Github上现有的StackOverflow帖子和React问题不正在处理Hooks。这些错误消息中报告的错误消息也略有不同：Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.我的错误消息中没有单词“无状态”。

此处的工作示例：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-使用useRef

1 个答案:

Box.js

Icon.js

Label.js