Reagir 16,8 +, componente funcional
import React, { useRef } from 'react'
const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)
// General scroll to element function
const 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>
</>
)
}
Clique aqui para obter uma demonstração completa do StackBlits
Reagir 16.3 +, componente Classe
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.
}
Componente de classe - retorno de chamada de referência
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.
}
Não use String refs.
Refs de string prejudicam o desempenho, não são compostáveis e estão saindo (agosto de 2018).
refs de string têm alguns problemas, são considerados herdados e provavelmente serão removidos em uma das versões futuras. [Documentação oficial do Reagir]
resource1 resource2
Opcional: Suavizar animação de rolagem
/* css */
html {
scroll-behavior: smooth;
}
Passando ref para uma criança
Queremos que o ref seja anexado a um elemento dom, não a um componente de reação. Portanto, ao passá-lo para um componente filho, não podemos nomear o prop ref.
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
Em seguida, conecte o ref prop a um elemento dom.
const ChildComp = (props) => {
return <div ref={props.refProp} />
}