我有一个聊天小部件,每当我向上滚动时,它就会弹出一个消息数组。我现在面临的问题是,当消息加载时,滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用,但我也需要知道使用哪种滚动函数来实现这一点

 handleScrollToElement(event) {
    const tesNode = ReactDOM.findDOMNode(this.refs.test)
    if (some_logic){
      //scroll to testNode      
    }
  }

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }

当前回答

使用findDOMNode最终将被弃用。

首选的方法是使用回调引用。

Github Eslint

其他回答

只是提醒一下,我无法让这些解决方案在Material UI组件上工作。看起来他们没有当前的属性。

我只是在我的组件中添加了一个空div,并设置了ref prop。

我有一个简单的场景,当用户点击我的材质UI导航栏的菜单项时,我想要向下滚动到页面上的部分。我可以使用引用和线程他们通过所有的组件,但我讨厌线程道具通过多个组件,因为这使得代码脆弱。

我只是在我的react组件中使用了香草JS,结果证明它工作得很好。在我想要滚动的元素上放置一个ID,在我的头组件中,我只是这样做了。

const scroll = () => {
  const section = document.querySelector( '#contact-us' );
  section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
};

对于读到这篇文章的人来说,如果他们没有那么幸运地使用上述解决方案,或者只是想要一个简单的即时解决方案,那么这个软件包对我来说很有用:https://www.npmjs.com/package/react-anchor-link-smooth-scroll。黑客快乐!

这是我发现的最简单的工作方式。 只需使用正常的javascript语法,不需要太多的包

  const scrollTohowItWorks = () =>  window.scroll({
    top: 2000,
    left: 0,
    behavior: 'smooth'
  });
  
  <NavLink onClick={scrollTohowItWorks} style={({ isActive }) => isActive? {color: '#e26702', fontWeight:'bold'}: { color: '#0651b3'}} to=''>Support</NavLink>

你现在可以从react钩子API中使用useRef了

https://reactjs.org/docs/hooks-reference.html#useref

宣言

let myRef = useRef()

组件

<div ref={myRef}>My Component</div>

Use

window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })