使用 Refs 数组而不是单个 Ref

Question

I'm using ref inside a map loop. I need an array of refs The problem is the ref only target the last element generated in the list here is the example I prepared, I need to have the custom hook run on all generated elements inside the map loop by a list of ref

I'm looking for a way without introducing another Component

import React, { useRef, useState, useEffect, useCallback } from "react";

/// throttle.ts
export const throttle = (f) => {
  let token = null,
    lastArgs = null;
  const invoke = () => {
    f(...lastArgs);
    token = null;
  };
  const result = (...args) => {
    lastArgs = args;
    if (!token) {
      token = requestAnimationFrame(invoke);
    }
  };
  result.cancel = () => token && cancelAnimationFrame(token);
  return result;
};

const id = (x) => x;
const useDraggable = ({ onDrag = id } = {}) => {
  const [pressed, setPressed] = useState(false);

  const position = useRef({ x: 0, y: 0 });
  const ref = useRef();

  const unsubscribe = useRef();
  const legacyRef = useCallback((elem) => {
    ref.current = elem;
    if (unsubscribe.current) {
      unsubscribe.current();
    }
    if (!elem) {
      return;
    }
    const handleMouseDown = (e) => {
      e.target.style.userSelect = "none";
      setPressed(true);
    };
    elem.addEventListener("mousedown", handleMouseDown);
    unsubscribe.current = () => {
      elem.removeEventListener("mousedown", handleMouseDown);
    };
  }, []);

  useEffect(() => {
    if (!pressed) {
      return;
    }

    const handleMouseMove = throttle((event) => {
      if (!ref.current || !position.current) {
        return;
      }
      const pos = position.current;

      const elem = ref.current;
      position.current = onDrag({
        x: pos.x + event.movementX,
        y: pos.y + event.movementY
      });
      elem.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
    });
    const handleMouseUp = (e) => {
      e.target.style.userSelect = "auto";
      setPressed(false);
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      handleMouseMove.cancel();
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [pressed, onDrag]);

  return [legacyRef, pressed];
};

/// example.ts
const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

const DraggableComponent = () => {
  const handleDrag = useCallback(
    ({ x, y }) => ({
      x: Math.max(0, x),
      y: Math.max(0, y)
    }),
    []
  );

  const [ref, pressed] = useDraggable({
    onDrag: handleDrag
  });

  return (
    <>
      {[1, 2, 3].map((el, i) => (
        <div key={"element" + i} ref={ref} style={quickAndDirtyStyle}>
          <p>{pressed ? "Dragging..." : "Press to drag"}</p>
        </div>
      ))}
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <DraggableComponent />
    </div>
  );
}

a link to a codesandbox is here https://codesandbox.io/s/determined-wave-pfklec?file=/src/App.js

Answer 1

Assuming that the goal is to make each generated element draggable individually, here is an example by switching some ref to arrays, and changed pressed to number | boolean number | boolean to pass an index .

Changed the names of legacyRef and pressed to handleRefs and pressedIndex to reflect the difference in their use case.

Forked live demo on: codesandbox (updated to omit the use of useCallback )

However, with the hook applied, it seems that each element (except the first one) has a limited draggable area.

The posted example also has this behavior on the third draggable item, so not sure if this is intended by the hook. If not, perhaps the implement of draggable need to be adjusted to be fit for all elements.

Hope that this could help as a reference.

import React, { useRef, useState, useEffect } from "react";

/// throttle.ts
export const throttle = (f) => {
  let token = null,
    lastArgs = null;
  const invoke = () => {
    f(...lastArgs);
    token = null;
  };
  const result = (...args) => {
    lastArgs = args;
    if (!token) {
      token = requestAnimationFrame(invoke);
    }
  };
  result.cancel = () => token && cancelAnimationFrame(token);
  return result;
};

const id = (x) => x;
const useDraggable = ({ onDrag = id } = {}) => {
  const [pressedIndex, setPressedIndex] = useState(false);
  const positions = useRef([]);
  const refs = useRef([]);
  const unsubscribes = useRef([]);

  const handleRefs = (elem, i) => {
    if (!elem) {
      return;
    }
    refs.current[i] = elem;
    if (!positions.current[i]) positions.current[i] = { x: 0, y: 0 };
    if (unsubscribes.current[i]) {
      unsubscribes.current[i]();
    }
    const handleMouseDown = (e) => {
      e.target.style.userSelect = "none";
      setPressedIndex(i);
    };
    elem.addEventListener("mousedown", handleMouseDown);
    unsubscribes.current[i] = () => {
      elem.removeEventListener("mousedown", handleMouseDown);
    };
  };

  useEffect(() => {
    if (!pressedIndex && pressedIndex !== 0) {
      return;
    }

    const handleMouseMove = throttle((event) => {
      if (
        !refs.current ||
        refs.current.length === 0 ||
        !positions.current ||
        positions.current.length === 0
      ) {
        return;
      }

      const pos = positions.current[pressedIndex];
      const elem = refs.current[pressedIndex];

      positions.current[pressedIndex] = onDrag({
        x: pos.x + event.movementX,
        y: pos.y + event.movementY
      });

      elem.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
    });

    const handleMouseUp = (e) => {
      e.target.style.userSelect = "auto";
      setPressedIndex(false);
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      handleMouseMove.cancel();
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [pressedIndex, onDrag]);

  return [handleRefs, pressedIndex];
};

/// example.ts
const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

const DraggableComponent = () => {
  const handleDrag = ({ x, y }) => ({
    x: Math.max(0, x),
    y: Math.max(0, y)
  });

  const [handleRefs, pressedIndex] = useDraggable({
    onDrag: handleDrag
  });

  return (
    <>
      {[1, 2, 3].map((el, i) => (
        <div
          key={"element" + i}
          ref={(element) => handleRefs(element, i)}
          style={quickAndDirtyStyle}
        >
          <p>{pressedIndex === i ? "Dragging..." : "Press to drag"}</p>
        </div>
      ))}
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <DraggableComponent />
    </div>
  );
}

Answer 2

In useDraggable function, create an Array of refs:

  const refs = useRef([]);
  const unsubscribe = useRef();
  const legacyRef = useCallback((elem, index) => {
    refs.current[index] = elem;
    if (unsubscribe.current) {
      unsubscribe.current();
    }
    if (!elem) {
      return;
    }

in handleMouseMove use this array:

if (!refs.current || !position.current) {
        return;
      }
      const pos = position.current;

      const elem = refs.current[index];
      position.current = onDrag({
[...]

The idea is to use the array index to assign the ref to each element. jHope it helps

Answer 3

Instead of trying to declare an array of refs try rendering a component while iterating over the array and declare single ref in that component.