在react无状态组件中onMouseEnter div时如何更改image src

Question

我是react的初学者。当鼠标进入分区时，我想更改我的图像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>
);
};

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

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

而且，我听说在不使用state的情况下，性能通常会更好。是这样吗？

永远感激你们：(

Answer 1

如果有两个图像，只需添加css属性。通过不显示来隐藏它，并将所有图像放在顶部。。。。

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

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

试试这个