如何在 ReactJS 中导航到同一页面上的特定 div？答案

【问题标题】：How to navigate to a particular div on the same page in ReactJS?如何在 ReactJS 中导航到同一页面上的特定 div？
【发布时间】：2021-11-15 07:28:34
【问题描述】：

我必须导航到 React JS 应用程序中同一页面上的特定 div。例如，它是如何在以下网站中完成的。当单击时，UI 会滚动并专注于特定的 div，同样适用于本网站上的其他链接。 https://reacttraining.com/react-router/web/api/NavLink/strict-bool

【问题讨论】：

stackoverflow.com/questions/15481911/…
当我点击侧边菜单时，我只想让焦点转到特定的 div 或组件。
Google for "javascript 滚动到页面的特定部分"

标签： reactjs react-router

【解决方案1】：

获取目标元素的偏移量并使用window.scrollTo 将其定位在页面顶部或您想要的任何位置。这适用于 chrome/最新的浏览器。您可能需要检查其他浏览器的兼容性。

let offsetTop  = document.getElementById("yourelement").offsetTop;
window.scrollTo({
    top: offsetTop-100, 
    behavior: "smooth"
});

程序在 codepen 中 https://codepen.io/Divine1/pen/zbQVwR

更新

我已将此逻辑添加到在线 reactjs 项目编辑器中，并且可以正常工作。你可以看看这段代码是如何工作的https://repl.it/@Divine1/QuietHeartyApplicationstack

查看App.jsApp.css 和实时结果。

【讨论】：

【解决方案2】：

我认为这可能是使用 useRef 挂钩的更好方法。点击时几乎相同：

const ref = useRef();

// the function when you want to scroll:
() => window.scrollTo({
    top: ref.current.offsetTop -100, 
    behavior: "smooth"
})

// Where you want to go
<div ref={ref} />

【讨论】：