Как получать массив элементов с одинаковым атрибутом ref?

Question

[Ignatiy2]

У меня есть несколько DOM элементов с одиноковым ref. Если воспользоваться обычной функцией React.createRef(), то при this.myRef.current будет возвращатся последний из элементов. Можно ли как-то возвращать целый массив из элементов, наподобии того как это делает document.querySelectorAll?

Answer 1

[0xD34F]

Одним из способов получения ссылки на элемент является использование коллбэка - внутри которого можете заполнять интересующий вас массив:

function App() {
  const [ count, setCount ] = useState(3);
  const updateCount = ({ target: { dataset: { change } } }) =>
    setCount(Math.max(0, count + +change));

  const refs = useRef([]);
  const logRefs = () => console.log(refs.current);

  useEffect(() => {
    refs.current.length = count;
  }, [ count ]);

  return (
    <div>
      <button onClick={updateCount} data-change={-1}>-</button>
      {count}
      <button onClick={updateCount} data-change={+1}>+</button>
      <button onClick={logRefs}>log refs</button>
      {Array.from({ length: count }, (n, i) => (
        <div ref={el => refs.current[i] = el}>
          {Math.random() * 1000 | 0}
        </div>
      ))}
    </div>
  );
}