我不确定如何提出这个问题,因为我仍然无法准确地界定问题。
我创建了一个 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];
};
这是我的 map 功能。如您所见,我已将 ref 分配给图像。
问题:悬停时只有一张图片有效。
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>
(显然,如果您愿意,可以配置更多 Prop 。)
关于javascript - 如何为 map 函数中的每个迭代分配一个新的 ref?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59273754/