@persovt

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

Кто подскажет, как можно отследить положение элемента или получить сразу много элементов в ref React (к примеру как в querySelectorAll в js)
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
Torin_Asakura
@Torin_Asakura
Solution Architect
красит все элементы списка красным
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’шки
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы