0

Вопрос наверно более теоретический. Есть приложение на React Hooks я хочу чтоб после перехода на страницу "список товаров" с хешом в url (#itemId=621) У меня происходил скрол к этому товару в списке.

Изначально мне показалась задача абсолютно элементарной

  1. в useEffect получаю хеш с помощью. (ueryString.parse(history.location.hash))
  2. каждому товару map докидываю id id={itemId=${item.id} супер hash = item.id
  3. Получаю ноду по хешу скрол...

так не работает....Начал разбираться, Гугл выдает кучу вариантов для с ref без ref. Куча либ для этого... Какой способ актуальный в 21 году? В какую сторону стоит копать?

Ps: Сорри за наивный вопрос, реакт для меня нов . А все примеры в сети как правило описывают элементарнеший пример. Кликнул по ссылку отскролился))

1 ответ 1

1
const itemNodes = useRef({});

useEffect(() => {
  const target = queryString.parse(history.location.hash);

  if (itemNodes.hasOwnProperty(target)) {
    const rects = itemNodes[target].getBoundingClientRect();
    window.scrollTo(0, rects.top);
  }
}, []);

// ...
items.map((item) => {
  const onRef = (node) => {
    itemNodes[item.id] = node;
  };
  return (
    <div className="my-item" ref={onRef}>Item</div>
  );
});


Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.