反應無狀態組件中的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 隱藏它，並將所有圖像放在頂部......

在鼠標懸停或輸入時，在此事件中，傳遞類名，就是這樣.....

我很久以前做過這個任務，但不記得我做了什么，

嘗試這個