javascript - 如何滚动到 ReactJs 中的元素？

Question

我正在 React 中构建一个 SPA，我需要在单击它时让导航滚动到页面部分，就像我们在 html 中使用锚标记一样。

我发现这个建议使用ref并且它似乎有效： Anchor navigation using the <a> tag inside a react component

问题是我不知道如何在单独的组件中做到这一点。

这些是我的组件：

因此，我将所有这些功能组件作为Layout' 孩子。我的导航，其中包含引用其中一些组件的项目，在里面Header：

这是我的导航，里面有什么Header。由于它是一个单页应用程序，我想要做的是当我点击Menu页面时滚动到菜单部分（菜单组件），当我点击Reviews它时滚动到CustomerReviews等等。

既然Navigation是 inside Header，我相信我必须做的是在其中创建一个Layout能够访问其他组件的方法，但我必须从 inside 触发这个方法Header。没问题。但我不知道如何使页面滚动到组件，因为我不能只将 aref放入组件中。像这样：

有没有办法做到这一点？即使没有ref，这也是迄今为止有意义的。

标签： javascriptreactjsscrollreact-hookssingle-page-application

Answer 1

我最终使用了React Scroll，它运行良好。我一直在寻找本机解决方案，但由于我找不到它，所以这个包可以完成这项工作。