如何滚动到 ReactJs 中的元素？

Question

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

我使用ref 找到了这个建议，它似乎有效： Anchor navigation using the <a> tag inside a react component

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

这些是我的组件：

所以，我将所有这些功能组件作为Layout 的子级。我的导航（包含引用其中一些组件的项目）位于 Header 内：

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

由于Navigation 在Header 内，我相信我必须在Layout 内创建一个方法才能访问其他组件，但我必须从@ 内触发此方法987654339@。没问题。但我不知道如何让页面滚动到组件，因为我不能只在组件中放置 ref。像这样：

有没有办法做到这一点？即使没有ref，这也是目前为止的意义所在。

Answer 1

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