ทำปฏิกิริยา 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.
}
องค์ประกอบระดับ - โทรกลับ 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.
}
อย่าใช้การอ้างอิงสตริง
การอ้างอิงสตริงเป็นอันตรายต่อประสิทธิภาพการทำงานไม่สามารถปรับแต่งได้และกำลังจะหมดไป (Aug 2018)
การอ้างอิงสตริงมีปัญหาบางอย่างถือเป็นมรดกและมีแนวโน้มที่จะถูกลบออกในการเผยแพร่ในอนาคต [เอกสารตอบโต้ทางการ]
resource1 resource2
ทางเลือก: Smoothe scroll animation
/* css */
html {
scroll-behavior: smooth;
}
ผ่านการอ้างอิงถึงเด็ก
เราต้องการอ้างอิงที่จะแนบกับองค์ประกอบ dom ไม่ได้เป็นองค์ประกอบที่ตอบสนอง ดังนั้นเมื่อส่งมันไปยังส่วนย่อยเราไม่สามารถตั้งชื่อผู้อ้างอิงได้
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
จากนั้นแนบเสาอ้างอิงไปยังองค์ประกอบ dom
const ChildComp = (props) => {
return <div ref={props.refProp} />
}