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

Question

我是 React 的初学者。我想在鼠标进入 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 属性。通过显示 none 隐藏它，并将所有图像放在顶部....

在鼠标悬停或输入时，在此事件中，传递 class 名称，就这样......

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

试试这个

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

How to change image src when onMouseEnter div in react stateless component

javascript

image

onmouseover

stateless

reactjs