如何解决当无状态组件中的onMouseEnter div时如何更改图像src
我是新手。 我想在鼠标进入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>
);
};
我可以在不使用状态的情况下更改图像吗?
大多数问题通常使用状态来更改图像。我认为当我的案子(代码)发生更改时不需要状态。
而且,我听说在不使用状态的情况下性能通常会更好。是吗?
总是感谢你们:)
解决方法
如果有2张图片,只需添加css属性。通过不显示来隐藏它,并将所有图像放在顶部....
在鼠标悬停或输入时,在这种情况下,传递类名,就这样.....
我很早以前就完成了这项任务,但是不记得我到底做了什么,
尝试一下
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。