如何滚动到一个元素？

如何滚动到一个元素？ React 16.8 +，功能组件

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)   // General scroll to element functionconst ScrollDemo = () => {   const myRef = useRef(null)   const executeScroll = () => scrollToRef(myRef)   return (      <>          <div ref={myRef}>I wanna be seen</div>          <button onClick={executeScroll}> Click to scroll </button>       </>   )}

React 16.3 +，Class组件

class ReadyToScroll extends Component {    constructor(props) {        super(props)        this.myRef = React.createRef()      }    render() {        return <div ref={this.myRef}></div>     }    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)       // run this method to execute scrolling.}

类组件-Ref回调

class ReadyToScroll extends Component {    myRef=null    // Optional    render() {        return <div ref={ (ref) => this.myRef=ref }></div>    }    scrollToMyRef = () => window.scrollTo(0, this.myRef.offsetTop)    // run this method to execute scrolling. }

---

不要使用字符串引用。

字符串引用会损害性能，不可组合且即将淘汰（2018年8月）。

字符串引用存在一些问题，被认为是旧问题，并且很可能在将来的发行版之一中删除。[官方React文档]

可选：平滑滚动动画

html {    scroll-behavior: smooth;}

将ref传递给孩子

我们希望ref附加到dom元素上，而不是附加到react组件上。因此，当将其传递给子组件时，我们无法命名prop ref。

const MyComponent = () => {    const myRef = useRef(null)    return <ChildComp refProp={myRef}></ChildComp>}

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

const ChildComp = (props) => {    return <div ref={props.refProp} />}