Javascript 在React中的一个大型组件中，我想单击一个元素并滚动到另一个元素

在React中，我想单击一个元素，并让页面滚动到另一个元素。
我已经看到这个问题在Stack Overflow上得到了回答，但我不知道如何在我正在使用的大型组件中实现它

操作件埋在下面的部件中，但如下所示。
应该滚动到元素的函数…

constscrolltoref=（ref）=>window.scrollTo（0，this.myRef.current）

在构造函数中创建Ref…

this.myRef=React.createRef（）

我要单击的元素将滚动到所需的元素…

)}
)
}
}
函数子级（{onMouseCenter、onMouseLeave、src、comment、isHovering}）{
返回(
{isHovering&&comment}
{isHovering&&}
);
}

解决方案 无需使用参考即可实现此目的

首先，更新您的

scrollToRef

功能：

const scrollToElement = (target) => window.scrollTo(0, target.offsetTop);

const executeScroll = (element) => scrollToElement(element.target)

最后，更新

executeScroll

函数：

const scrollToElement = (target) => window.scrollTo(0, target.offsetTop);

const executeScroll = (element) => scrollToElement(element.target)

笔记：

• 您正在将myRef值赋给表单，
  。因此，当您执行scrollToRef（this.myRef）时，您的代码将滚动到该表单

• 若要继续使用参照，需要为要滚动到的每个元素创建一个参照。例如：

  this.contactRef=React.createRef（）；this.homeRef=React.createRef（）；等等…

• 然后将这些ref附加到相应的元素：

  ，以了解有关ref和dom的更多信息
  

• console.log（）

  stuff，如果您懒得梳理文档，可以直观地看到抛出的数据

---

下面是一个演示如何使用refs和不使用refs实现滚动的示例。

谢谢您的回答。它工作了一秒钟，但随后它开始滚动到页面顶部，或者像未定义的

属性'offsetTop'之类的东西。我应该使用refs吗？你说我不需要？我无法理解那些文档中的引用，因为我的问题与之不同。我看不出有什么相似之处。对不起，我很烦躁。我可能混淆了
scrollToElement
和
scrollToRef
之类的东西。我对这个常量链和ref在这里做什么一无所知。是否需要在某个地方使用
this.bind（this）
？这个未定义的错误可能源于传递错误变量的错误。确保所有变量都已正确命名。用反应的方式做事需要很大的耐心和练习。当我在react中做一些事情时，我会从我的项目中退一步，在一个新的示例应用程序中乱搞。下面是我创建的一个示例，演示了这两种解决方案。我为您提供了评论和console.log供您参考。我将更新我的答案以包含链接。谢谢你的帮助。这个问题真的困扰着我，因为我喜欢学习，但没有一个合理的理由让它不起作用。刚才我一直在将
onClick
移动到不同的元素，有时滚动会跳转到所需的元素。大多数时候，它会滚动到最顶端。没有错误。我在其他浏览器上尝试过，结果都是一样的。React绝大多数时候都不知道我想要的裁判在哪里。