ReactJS如何滚动到一个元素 [英] ReactJS how to scroll to an element

问题描述

我有一个聊天小部件，每次向上滚动时都会提取一系列消息。我现在面临的问题是，当消息加载时，滑块保持固定在顶部，我希望它专注于前一个数组的最后一个索引元素。我发现我可以通过传递索引来制作动态引用，但我还需要知道用什么类型的滚动函数来实现

I have a chat widget that pulls up an array of messages everytime I scroll up. The problem I am facing now is, the slider stays fixed at the top when messages load, I want it to focus on the last index element from the previous array. I figured out that i can make dynamic refs by passing index, but I would also need to know what kind of scroll function to use to achieve that

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

  render() {

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

推荐答案

选项1：使用React.createRef（React 16.3 +）

Option 1: Use React.createRef (React 16.3 +)

class MyComponent extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()   // Create a ref object 
    }

    render() {
        return <div ref={this.myRef}></div> 
    }   // attach the ref property to a dom element

    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)   
    // run this method to execute scrolling. 

}

选项2：使用参考回调

Option 2: Use a ref callback

class MyComponent extends Component {

    constructor(props){   // Optional, declare a class field to improve readability
        super(props)
        this.myRef=null    
    }

    render() {
        return <div ref={ (ref) => this.myRef=ref }></div>
    }   // Attach the dom element to a class field

    scrollToMyRef = () => window.scrollTo(0, this.myRef.offsetTop)
    // run this method to execute scrolling. 
}

不要使用String refs。

字符串引用了伤害性能，不可组合，并且在那里（2018年8月）。

Don't use String refs.

String refs harm performance, aren't composable, and are on there way out (Aug 2018).

string refs有一些问题，被认为是遗留问题，可能会在未来的一个版本中删除
。 [官方React文档]

string refs have some issues, are considered legacy, and are likely to be removed in one of the future releases. [Official React documentation]

resource1 ， resource2

1. ref只能存储在类组件中。 （这将在将来发布ref挂钩时发生变化）


2. 为了滚动到一个元素，类中的ref属性必须附加到一个实际的dom元素;我们使用浏览器的本机滚动方法，我们需要知道元素在页面上的实际位置。


3. 可以将ref（在上面建议的任何一种方法中）作为prop传递给子级。

将ref传递给孩子

React.createRef - 将ref对象作为prop传递给子组件。

Passing ref to a child

React.createRef - Pass the ref object as a prop to the child component.

render() {
    return <ChildComp refProp={this.myRef}></ChildComp>
}

然后将ref prop附加到dom元素。

Then attach the ref prop to a dom element.

class ChildComp extends Component {
    render () {
        return <div ref={this.props.refProp} />
    }
}

更新

过去我建议将options对象传递给window.scrollTo。 Edge和IOS尚不支持此表单。

Update

In the past I recommended passing an options object to window.scrollTo. Edge and IOS don't support this form yet.

这篇关于ReactJS如何滚动到一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！