Forward Ref (Forward Ref)

forwardRef در ری اکت کمک می کند به یک بچه کامپوننت مستقیم دسترسی بگیری. یعنی می توانی رفرنس (Ref) آن را از بیرون کنترل کنی. این کار بیشتر برای عناصر واقعی صفحه یا همان DOM است.

forwardRef در ری اکت چیست؟

رفرنس یا Ref یک اشاره گر به یک چیز در حافظه است. اینجا Ref یعنی یک آدرس مستقیم به یک المنت.

DOM نسخه درختی صفحه HTML داخل مرورگر است. با forwardRef این رفرنس را از والد به المنت DOM می فرستیم.

حالا چند کاربرد مهم forwardRef را خیلی ساده ببینیم.

• فوکوس کردن سریع روی input بدون رویداد اضافی
• شروع کردن یک انیمیشن وقتی المنت آماده است
• گرفتن اندازه دقیق یک div برای محاسبه ها
• اتصال المنت به کتابخانه های جانبی مثل اسلایدرها

مثال ساده forwardRef در ری اکت

در این مثال یک input جدا می سازیم که رفرنس بگیرد. کامپوننت والد با یک دکمه روی همین input فوکوس می کند.

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return (
    <input
      ref={ref}
      {...props}
    />
  );
});

function App() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <MyInput
        ref={inputRef}
        placeholder="Type here..."
      />
      <button
        onClick={focusInput}
      >
        Focus Input
      </button>
    </div>
  );
}

مشاهده در ادیتور

گام های اجرای مثال

1. کامپوننت MyInput را با forwardRef می پیچیم تا ref بگیرد.
2. داخل MyInput آن ref را روی تگ input می گذاریم.
3. در App یک ref با useRef می سازیم و به MyInput می دهیم.
4. تابع focusInput از روی ref به input.current.focus دسترسی می گیرد.
5. با کلیک روی دکمه تابع اجرا و input فوکوس می شود.

نکته: بیشتر وقت ها state و props کافی هستند؛ forwardRef برای زمان های خاص است.

چه زمانی از forwardRef استفاده کنیم؟

وقتی باید مستقیم به یک input یا div دسترسی بگیری. مثلاً فرم طولانی داری و می خواهی روی فیلد بعدی فوکوس شود.

گاهی هم کتابخانه ای داری که خودش با DOM کار می کند. در این حالت forwardRef کمک می کند المنت درست به آن وصل شود.

بعد از یادگیری forwardRef در ری اکت می توانی سراغ ترنزیشن ها در ری اکت هم بروی.

جمع بندی سریع

• forwardRef رفرنس را از والد به بچه کامپوننت می فرستد.
• از آن برای فوکوس، انیمیشن و اندازه گیری DOM استفاده کن.
• همیشه اول با state و props مشکل را حل کن.
• فقط وقتی نیاز به دسترسی مستقیم DOM داری سراغ forwardRef برو.