이 질문을 어떻게해야할지 모르겠습니다. 여전히 문제의 틀을 정확히 파악할 수 없기 때문입니다.
useHover 함수를 만들었습니다. 아래에서 내가 데이터를 매핑하고 많은 사진을 렌더링하고 있음을 알 수 있습니다. 그러나 useHover는 첫 번째 반복에서만 작동합니다.
나는 그것이 내 심판 때문이라고 생각합니다. 어떻게 작동합니까? 각 반복 내부에 새 참조를 만들어야합니까? 아니면 잘못된 생각입니까 ..?
어떻게 할 수 있습니까?
여기 내 useHover 함수가 있습니다.
const useHover = () => {
const ref = useRef();
const [hovered, setHovered] = useState(false);
const enter = () => setHovered(true);
const leave = () => setHovered(false);
useEffect(() => {
ref.current.addEventListener("mouseenter", enter);
ref.current.addEventListener("mouseleave", leave);
return () => {
ref.current.removeEventListener("mouseenter", enter);
ref.current.removeEventListener("mouseleave", leave);
};
}, [ref]);
return [ref, hovered];
};
여기 내지도 기능이 있습니다. 보시다시피 이미지에 참조를 할당했습니다.
문제 : 마우스를 가져 가면 이미지 중 하나만 작동합니다.
const [ref, hovered] = useHover();
return (
<Wrapper>
<Styles className="row">
<Div className="col-xs-4">
{data.map(item => (
<div className="row imageSpace">
{hovered && <h1>{item.fields.name}</h1>}
<img
ref={ref}
className="image"
key={item.sys.id}
alt="fall"
src={item.fields.image.file.url}
/>
</div>
))}
</Div>
JavaScript 코드에서 호버링을 처리하는 대신 가능하면 CSS를 사용하여이를 처리합니다.
JavaScript 코드에서 수행하는 경우 마우스를 올려 놓은 항목에 대한 구성 요소를 생성하여이를 처리합니다.
function MyImage({src, header}) {
const [ref, hovered] = useHover();
return (
<div className="row imageSpace">
{hovered && <h1>{header}</h1>}
<img
ref={ref}
className="image"
alt="fall"
src={src}
/>
</div>
);
}
그런 다음 해당 구성 요소를 사용하십시오.
return (
<Wrapper>
<Styles className="row">
<Div className="col-xs-4">
{data.map(item =>
<MyImage
key={item.sys.id}
src={item.fields.image.file.url}
header={item.fields.name}
/>
)}
</Div>
(분명히 원하는 경우 구성 가능한 소품을 더 많이 만드십시오.)
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다