Как отследить положение элемента React?

Question

[persovt]

Кто подскажет, как можно отследить положение элемента или получить сразу много элементов в ref React (к примеру как в querySelectorAll в js)

Comments

[Сергей Сунцев]

Положение относительно чего?

[persovt]

Страницы

[Сергей Сунцев]

Какой страницы?

[persovt]

Какая разница относительно чего ? Просто хоть любой метод, где можно получить расположение элемента на странице. К примеру offsetTop в js

Answer 1

[Andrew Ghostuhin]

красит все элементы списка красным

import { useRef, useEffect } from "react";

const Item = ({ element, pushNode }) => {
  const node = useRef(null);

  useEffect(() => {
    pushNode(node);
  }, [node]);

  return <li ref={node}>{element}</li>;
};

const List = ({ elements, pushNode }) => {
  return (
    <ul>
      {elements.map((element) => (
        <Item element={element} pushNode={pushNode} />
      ))}
    </ul>
  );
};

const App = () => {
  const elements = ["one", "two", "three"];
  const nodes = [];

  const pushNode = (node) => nodes.push(node);

  const paintRed = (event) => {
    nodes.forEach((node) => {
      node.current.style.color = "red";
    });
  };

  return (
    <>
      <List elements={elements} pushNode={pushNode} />
      <button onClick={paintRed}>Paint it red</button>
    </>
  );
};

export default App;

elements - просто массив из стрингов которые как бы элементы
nodes - (будущий) массив рефов
pushNode - колбек который пушит в массив реф, его основная суть в том чтобы чистоту кода сохранять и не срать в глобальный скоуп из компонента
List - обычный ul который мапит elements создавая Item на каждой итерации
Item - обычный li внутри которого находится текст элемента из elements

Внутри Item создается реф на li, после того как компонент маунтится (чтобы сам реф появился) вызывается колбек который пушит реф в nodes, потом по нажатию кнопки средствами DOM’а красятся li’шки