Блог

Я новичок в react. Я хочу изменить src моего изображения, когда мышь вводит div.

Вот мой код.

 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>
  );
};
  

Могу ли я изменить изображение без использования состояния?

Большинство вопросов обычно используют состояние для изменения изображения. Я думаю, что состояние не требуется, когда в моем случае происходят изменения (коды).

И я слышал, что производительность обычно лучше без использования состояния. Это правильно?

Всегда ценю вас, ребята 🙂

В случае 2 изображений просто добавьте свойство css. Скройте его, показав «нет», и разместите все изображения сверху….

При наведении курсора мыши или вводе в этом случае передайте имя класса , вот и все …..

Я выполнил эту задачу давно, но не могу точно вспомнить, что я сделал ,

Попробуйте это