我不确定如何问这个问题,因为我仍然无法准确地描述问题。
我创建了一个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>
我会尽可能使用CSS处理此问题,而不是处理JavaScript代码中的悬停问题。
如果在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>
(显然,如果您愿意,可以配置更多的道具。)