زمان استفاده از «useImperativeHandle» و «forwardRefs» در React 18
گاهی اوقات باید ایده های بزرگ را بیرون بیاورید
این مقاله در ادامه ref ها چیست و چگونه کار می کنند. با دانش به‌دست‌آمده از مقاله قبلی، بیایید به درک کمی پیچیده‌تر بپردازیم، که می‌تواند در پروژه‌های دنیای واقعی با تعداد زیادی تودرتوی اجزا و کمی نیازهای واقعی مبتنی بر DOM مفید باشد.
Ref Forward
انجام پروژه در فریلنس پروژه
راه حل بدون مشکل چیست، درست است؟ بنابراین، بیایید وضعیتی را تعریف کنیم که داوران معمولی نتوانند کار را انجام دهند. اگر یک مؤلفه والد داشته باشیم که بخواهد به یکی از عناصر تعریف شده در مؤلفه فرزند ارجاع دهد و حالت فوکوس را تغییر دهد، چه؟ بیایید چنین مثالی ایجاد کنیم.
مؤلفه والد فوکوس دکمه تعریف شده در مؤلفه فرزند را کنترل می کند.
همانطور که در بالا می بینید، مؤلفه والد تمرکز روی دکمه مؤلفه فرزند را کنترل می کند. این به این سادگی نیست که رف تعریف شده در والدین را به عنوان یک تکیه گاه به کودک منتقل کنید. در مورد ما، ref یک ویژگی خاص است که روی عنصر دقیق HTML تعریف شده است که تمرکز آن باید تغییر کند، نه بسته بندی مولفه فرزند، زیرا فقط یک تابع است.
ما می‌توانیم با قرار دادن مولفه فرزند خود در یک تابع forwardRef که توسط React ارائه شده است، به رفتار دلخواه برسیم. این تابع باید پروپوزال‌های ارسالی را منتقل کند و اجازه می‌دهد یک پایه اضافی روی کامپوننت، که «رجف» ما باشد. این کد است:
چگونه از forwardRef در React استفاده کنیم؟
استفاده از ImperativeHandle
خب، ظاهراً آنچه در بخش قبل به دست آوردیم حتی برای موقعیت های پیچیده نیز کافی است. با این حال، گاهی اوقات ممکن است وسوسه شوید که یک عملکرد ref سفارشی را در داخل کامپوننت خود تعریف کنید، که در معرض اجزای با استفاده از آن قرار می گیرد. بیایید سعی کنیم شرایطی ایجاد کنیم که به چنین کنترل دقیقی نیاز داشته باشیم.
سفارش ساخت سایت با بهترین متخصصان
به‌طور پیش‌فرض، رنگ فوکوس روی ورودی آبی است، اما بیایید بگوییم اگر قرار است نینجا ما مأموریت سطح جونین فوق‌بحرانی را دریافت کند، فیلد ورودی باید به جای آن روی قرمز تمرکز کند.
مؤلفه والد می تواند کنترل کند که ورودی کودک روی کدام رنگ تمرکز می کند.
برای نشان دادن استفاده از useImperativeHandle در این مورد، اجازه دهید از عقل سلیم منحرف شویم و دو روش سفارشی مرتبط با مؤلفه ورودی را از طریق ref بسازیم. به جای روش فوکوس پیش‌فرض، این بار، دو روش سفارشی ()focusRed و focusBlue() خواهیم داشت.
ما همچنان باید از ForwardRef استفاده کنیم تا ref را به مؤلفه فرزند منتقل کنیم، اما در داخل مؤلفه فرزند، این توابع جدید را با کمک قلاب useImperativeHandle ایجاد خواهیم کرد. در اینجا کد به نظر می رسد:
ما با استفاده از useImperativeHandle متدهای سفارشی را به ref اضافه می کنیم.
انجام پروژه متلب با بهترین برنامه نویسان و متخصصان
نکته مهمی که باید به آن توجه کنید این است که در کد بالا روش‌های موجود را به‌طور پیش‌فرض مانند مورد قبلی گسترش نمی‌دهیم، بلکه مجموعه‌ای کاملاً جدید از روش‌ها را ایجاد می‌کنیم. بنابراین، متد ()focus پیش فرض دیگر در دسترس ما نیست و فراخوانی آن خطاهای شیرینی را برای ما به همراه خواهد داشت.
روش فوکوس هنگام استفاده از دسته امری در دسترس نیست.
نتیجه
به طور خلاصه، آنچه را در مقاله قبلی گفتم تکرار می کنم: خود Refs به DOM نباید هنگام انجام توسعه مبتنی بر dom مجازی استفاده شود زیرا تغییراتی که در DOM واقعی ایجاد می کنید به درستی به vDOM منتقل نمی شود. راه اندازی، و این منجر به واکنش غیرمنتظره می شود.
طراحی لوگو با بهترین طراحان لوگو
من تمرکز را به عنوان موضوع اصلی این مقاله انتخاب کردم، فقط به این دلیل که یکی از نیازهای اصلی زمانی است که داوران باید احضار شوند. React به مجموعه محدودی از موارد استفاده برای ref ها اشاره می کند