Реагує 16,8 +, функціональний компонент
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>
</>
)
}
Клацніть тут, щоб отримати повну демонстрацію на StackBlits
Реакція 16.3 +, компонент класу
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.
}
Компонент класу - Відкликання зворотного виклику
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).
Посилання на рядки мають деякі проблеми, вважаються застарілими і, ймовірно, будуть видалені в одному з майбутніх версій. [Офіційна документація на реагування]
ресурс1 ресурс2
Необов’язково: згладити анімацію прокрутки
/* css */
html {
scroll-behavior: smooth;
}
Проходження реф. На дитину
Ми хочемо, щоб посилання було приєднано до елемента купола, а не до компонента, що реагує. Отже, передаючи його дочірньому компоненту, ми не можемо назвати реквізит підтримки.
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
Потім прикріпіть опорну опору до елемента dom.
const ChildComp = (props) => {
return <div ref={props.refProp} />
}