ক্রিয়ামূলক উপাদান, 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>
</>
)
}
স্ট্যাকব্লিটগুলিতে একটি পূর্ণ ডেমো জন্য এখানে ক্লিক করুন
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
Alচ্ছিক: স্মল স্ক্রোল অ্যানিমেশন
/* css */
html {
scroll-behavior: smooth;
}
একটি সন্তানের রেফ পাস করা
আমরা চাই যে রেফটি কোনও প্রতিক্রিয়ার উপাদানগুলির সাথে নয়, একটি ডোম উপাদানটির সাথে সংযুক্ত করা হোক। সুতরাং এটি কোনও শিশু উপাদানগুলিতে দেওয়ার সময় আমরা প্রপ রেফের নাম রাখতে পারি না।
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
তারপরে একটি ডোম উপাদানটির সাথে রেফ প্রোপ সংযুক্ত করুন।
const ChildComp = (props) => {
return <div ref={props.refProp} />
}