主页 / 问题 / 1250880
Accepted
pridan
Asked:2022-03-03 06:14:12 +0000 UTC2022-03-03 06:14:12 +0000 UTC

页面加载后滚动到锚点 ReactApp

  • 772

这个问题可能更具理论性。在 React Hooks 上有一个应用程序，我希望在转到带有哈希的 url ( #itemId=621) 中的“产品列表”页面后，我会滚动到列表中的这个产品。

最初，在我看来，这项任务绝对是初级的。

  1. 在 useEffect 我得到一个哈希使用。( ueryString.parse(history.location.hash))
  2. 对于每个产品图，我都会抛出 id id={itemId=${item.id} super hash = item.id
  3. 我通过哈希滚动得到一个节点......

它不像那样工作....我开始想通了，谷歌给出了一堆选项 with ref without ref。一堆用于此的库...在 21 年内哪种方法相关？应该往哪个方向挖？

Ps：抱歉这个天真的问题，反应对我来说是新的。而网上所有的例子通常都描述了一个基本的例子。点击链接，它滚动））

reactjs

1 个回答

  1. Best Answer
    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>
  );
});
    • 1

相关问题