ویژگی forwardRef در ری اکت به ما اجازه میده یک ref رو از کامپوننت والد به کامپوننت فرزند پاس بدیم ( منقل کنیم ). برای اینکه بدونیم forwardRef در ری اکت چیه و دقیقا چیکار میکنه باید قبلش بدونیم ref و هوک useRef تو ریکت چی هستن و چیکار میکنن. با فرانت اندی همراه باشید تا ببینیم forwardRef در react چیه ؟ ?
( تو مقاله useRef در ریکت در این رابطه صحبت کردیم، پیشنهاد میکنم مطالعه کنید )
اما بریم ببینیم forwardRef در ریکت چیه ؟
ما میدونیم که از ref در ری اکت میتونیم برای دسترسی به Element های موجود در DOM استفاده کنیم.
یعنی میتونیم به کمک هوک useRef یک ref بسازیم و هر زمان که لازم داشتیم به Element خودمون که تو DOM هست دسترسی داشته باشیم.
اما شرایطی رو در نظر بگیرید که نیاز داریم از کامپوننت والد، به یکی از Element های کامپوننت فرزند دسترسی داشته باشیم!
ما تو کامپوننت والد ref رو ساختیم و از کامپوننت فرزند هیچ دسترسی به این ref نداریم که بتونیم به یکی از اِلِمان های کامپوننت فرزند این ref رو اختصاص بدیم!
اینجاست که forwardRef در ریکت به ما کمک میکنه ? چون به کمک این ویژگی میتونیم ref های خودمون رو از کامپوننت والد به کامپوننت فرزند منتقل کنیم ( پاس بدیم ) که به این پروسه React.forwardRef میگیم.
درواقع ref در ریکت به ما اجازه میده که به یک Element ( اِلِمان ) بصورت مستقیم تو DOM دسترسی داشته باشیم.
بطور کل به ref ها زمانی احتیاج پیدا میکنیم که :
تو تیکه کد زیر، ما یک ref به Element خودمون ( div ) دادیم تا بتونیم زمانیکه وارد DOM شد بهش دسترسی داشته باشیم :
import { useRef, useEffect } from 'react'
export function Parent() {
const myRef = useRef() // ساخت رِِف
useEffect(() => {
// after mounting
console.log(myRef.current) // اینجا به اِلِمان خودمون که داخل دام هست دسترسی پیدا کردیم
}, [])
return <div ref={myRef}></div> سلاام من یه اِلِمانم. از داخل دام قابل دسترسی مستقیمم</div>//اینجا رف خودمونو به این اِلِمان اختصاص دادیم
}
تو خط 4 یک ref ساختیم ( به کمک هوک useRef در react )
تو خط 11، ref ساخته شده رو به یک Element اختصاص دادیم ( که بتونیم زمانیکه وارد DOM شد بهش دسترسی داشته باشیم)
تو خط 8، زمانیکه کامپوننت و Element های ما وارد DOM شدن، به Element خودمون که یک div بود دسترسی پیدا کردیم و اِلِمان رو صرفا log گرفتیم ( اما هر کار دیگه ای میتونستیم باهاش بکنیم )
تو مثال بالا اصلا به forwardRef احتیاج پیدا نکردیم! اما بیاید سناریویی رو در نظر بگیریم که میخوایم به یکی از اِلِمان های کامپوننت فرزند در DOM دسترسی پیدا کنیم!
تو مثال زیر، ref خودمون رو در کامپوننت والد ساختیم و از طریق props به کامپوننت فرزند منتقل کردیم تا به div خودمون اختصاص بدیم :
import { useRef, useEffect } from 'react'
export function Parent() {
const myRef = useRef()
useEffect(() => {
// نمیتونیم دسترسی داشته باشیم !!
console.log(myRef.current) // Undefind!
}, [])
return <Child ref={myRef} /> // انتقال رِِف به کامپوننت فرزند
}
function Child({ ref }) { //یک کامپوننت جدید، که کامپوننت فرزند هست
return <div ref={ref}>سلام</div>
}
تو کد بالا از کامپوننت والد، یک ref رو به کامپوننت فرزند منتقل کردیم و به یک div اختصاص دادیم. اما زمانیکه میخوایم به اِلِمان div از کامپوننت والد دسترسی داشته باشیم به مشکل میخوریم!
در حقیقت خروجی خط 8، مقدار undefind هست!
در واقع کامپوننت والد، نمیتونه به اِلِمان div در کامپوننت فرزند که در DOM هست دسترسی داشته باشه ( با اینکه از ref استفاده کردیم)
ما ارور زیر رو از ری اکت دریافت میکنیم :
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef
خود ری اکت فهمیده که ما میخوایم یک ref رو از کامپوننت والد به کامپوننت فرزند انتقال بدیم و بنده خدا پیشنهاد کرده از forwardRef استفاده کنیم ?
اتفاقی که تو تیکه کد بالا افتاد رو میشه تو تصویر زیر دید :
خب حالا بریم ببینیم forwardRef در ریکت چیه ؟
لطفا برای مطالعه ادامه این مقاله در وبسایت فِرانت اِندی + مثالهای بیشتر روی لینک زیر کلیک کنید :
