React forwardRef

forwardRef nima?

forwardRef sizning componentingizga o‘z farzandlaridan biriga havolani o‘tkazish imkonini beradi. Bu sizning componentingiz ichidagi DOM elementiga to‘g‘ridan-to‘g‘ri havola qilish kabi.

Common uses for forwardRef:

• Kirish elementlarini fokuslash
• Animatsiyalarni ishga tushirish
• DOM elementlarini o‘lchash
• Uchinchi tomon kutubxonalari bilan integratsiya

Asosiy misol

Refni kirish elementiga yuborishning oddiy misoli:

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => (
  <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>
  );
}

Ushbu misolda:

• Biz kirish componentimizni forwardRef bilan o‘rab olamiz
• Component ikkinchi parametr sifatida ref qabul qiladi
• Ota-ona endi kiritish elementini bevosita boshqarishi mumkin