如何为 map 函数内的每次迭代分配一个新的 ref? [英] How can I assign a new ref to every iteration inside a map function?

问题描述

我不知道如何问这个问题，因为我仍然无法准确地描述问题.

我创建了一个 useHover 函数.下面，您将看到我正在映射数据并渲染一堆照片.但是， useHover 仅适用于第一次迭代.

我怀疑是因为我的裁判.这是如何运作的?我应该在每次迭代中创建一个新的 ref -- 还是错误的想法..?

我该怎么做?

这是我的 useHover 函数.

const useHover = () =>{const ref = useRef();const [悬停，setHovered] = useState(false);const 输入 = () =>设置悬停(真)；const 离开 = () =>设置悬停(假)；useEffect(() => {ref.current.addEventListener("mouseenter", enter);ref.current.addEventListener("mouseleave", leave);返回 () =>{ref.current.removeEventListener("mouseenter", enter);ref.current.removeEventListener("mouseleave", leave);};}, [参考]);返回 [ref, 悬停];};

这是我的地图功能.如您所见，我已将 ref 分配给图像.

问题:悬停时只有一张图像有效.

const [ref, hovered] = useHover();返回 (<包装器><Styles className="row"><Div className="col-xs-4">{data.map(item => (<div className="row imageSpace">{悬停&&<h1>{item.fields.name}</h1>}
))}

解决方案

如果可能的话，我会通过使用 CSS 来处理这个问题，而不是在我的 JavaScript 代码中处理悬停.

如果在 JavaScript 代码中执行此操作，我会通过为悬停的事物创建一个组件来处理此问题:

function MyImage({src, header}) {const [ref, 悬停] = useHover();返回 (<div className="row imageSpace">{悬停&&<h1>{标题}</h1>}
);}

然后使用该组件:

返回 (<包装器><Styles className="row"><Div className="col-xs-4">{data.map(item =><我的图片键={item.sys.id}src={item.fields.image.file.url}标头={item.fields.name}/>)}

(显然，如果您愿意，可以配置更多道具.)

I'm not sure how to ask this question, because I'm still unable to accurately frame the problem.

I've created a useHover function. Below, you'll see that I am mapping over data and rendering a bunch of photos. However, the useHover only works on the first iteration.

I suspect that it's because of my ref. How does this work? Should I creating a new ref inside of each iteration -- or is that erroneous thinking..?

How can I do this?

Here's my useHover function.

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];
};

And here's my map function. As you can see I've assigned the ref to the image.

The problem: Only one of the images works when 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>

解决方案

I'd handle this by using CSS if at all possible, rather than handling hovering in my JavaScript code.

If doing it in JavaScript code, I'd handle this by creating a component for the things that are hovered:

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>
    );
}

and then use that component:

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>

(Obviously, make more of the props configurable if you like.)

这篇关于如何为 map 函数内的每次迭代分配一个新的 ref?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！