如何在反应无状态组件中的onMouseEnter div时更改图像src

Question

我是反应的初学者。 我想在鼠标进入 div 时更改我的图像 src。

这是我的代码。

const CategoryImage = styled.img.attrs(props => ({
  src: props.url,
}))`
  width: 80px;
  height: 80px;
  margin: 5px auto;
`;

let imgUrl = ``;

const Category = ({ categoryItems }) => {
  function handleHover(category) {
    const {
      category: { hoverUrl },
    } = category;
    // console.log(hoverUrl);
    imgUrl = hoverUrl;
  }
  function handleUnHover(category) {
    const {
      category: { url },
    } = category;
    // console.log(url);
    imgUrl = url;
  }

  return (
    <Container>
      <Grid>
        {categoryItems.map(category => (
          <CategoryContainer
            key={category.id}
            onMouseEnter={() => handleHover({ category })}
            onMouseLeave={() => handleUnHover({ category })}
          >
            <CategoryImage url={imgUrl} alt={category.name} />
            <CategoryName key={category.id}> {category.name} </CategoryName>
          </CategoryContainer>
        ))}
      </Grid>
    </Container>
  );
};

我可以在不使用状态的情况下更改图像吗？

大多数问题通常使用状态来改变图像。我认为当我的案例（代码）发生变化时不需要状态。

而且，我听说不使用状态通常性能会更好。对吗？

永远感谢你们:)

Answer 1

如果是 2 张图片，只需添加 css 属性。通过 display none 隐藏它，并将所有图像放在顶部 ....

鼠标悬停或输入时，在这种情况下，传递类名，就是这样.....

我很久以前就做过这个任务，但记不起我到底做了什么，

试试这个