大家好,我正在网站上创建一个服务组件,其中每个服务都有自己的图标,有两个版本 - 标准(灰色)和悬停时(蓝色):
设计者和客户希望当您将鼠标悬停在块上时,图像从 Mixer_off.png 更改为 Mixer_on.png(名称是有条件的)。现在,在服务组件中,图像是从另一个组件中的图像“集合”中提取的:
// Здесь я импортирую картинки для компонента услуг
import Смеситель_off from '../Смеситель off.png';
import Смеситель_on from '../Смеситель on.png';
export {
Смеситель_off,
Смеситель_on,
}
然后我将这些图像道具传递给状态。这样,如果发生某些情况,它们可以动态更改:
// В этом файле определяется список услуг, на основе количества элементов в состоянии [services]
import React, { useState } from 'react';
import ServicesItem from '../ServicesItem.jsx';
const ServicesListMiddle = () => {
const [services] = useState ([
{
imgOff: 'Смеситель_off',
imgOn: 'Смеситель_on',
}
])
return (
<section className='services_middle'>
{services.map(service =>
<ServicesItem
imgOff={service.imgOff}
imgOn={service.imgOn}
/>
)}
</section>
);
}
export default ServicesListMiddle;
因此,我将初始图像设置为默认组件:
// Это сама карточка услуги
import React from 'react';
import * as Img from '../Img.jsx' // Коллекция картинок
const ServiceItem = (props) => {
return (
<div onMouseEnter={???}>
<img src={Img[`${props.imgOff}`]}/>
</div>
);
}
一切都会好起来的,但是 React 有一个相当复杂的故事,DOM 树根据事件发生变化。我需要确保当您将鼠标悬停(onMouseEnter)
在父 div 上时,图片将其状态更改为图片集合中的另一张图片,最好是平滑地,就像通过 css 使用transition
. 请知情人士告诉我该怎么办。建议这与我目前的方法(通过道具和图片集)没有太大区别。但如果有更简单或者正确的方法,我也会考虑,重做,不胜感激。预先感谢大家!