საბეჭდი ref რომელიც გადასცემთ custom კომპონენტს არ მიდის ავტომატურად DOM კვანძამდე მის შიგნით. forwardRef საშუალებას აძლევს კომპონენტს მიიღოს ref და მიამაგროს იგი შვილი ელემენტზე. useImperativeHandle ხელახლა განსაზღვრავს რა აჩენს ეს ref.
საბეჭდი ref რომელიც გადასცემთ custom კომპონენტს არ მიდის ავტომატურად DOM კვანძამდე მის შიგნით. forwardRef საშუალებას აძლევს კომპონენტს მიიღოს ref და მიამაგროს იგი შვილი ელემენტზე. useImperativeHandle ხელახლა განსაზღვრავს რა აჩენს ეს ref.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
ზოგჯერ არ გსურთ მთელი DOM კვანძის ღრმა გამჟღავნება — მხოლოდ სპეციფიური მეთოდები:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
უმჯობესია props/state გამოიყენოთ კომუნიკაციისთვის. ref-ებს მიმართეთ მხოლოდ ჭეშმარიტ imperative მოთხოვნებისთვის: ფოკუსის მართვა, scroll-ი, ტექსტის არჩევა, მედია ფაილის ჩართვა, ან imperative ბიბლიოთეკების ინტეგრაცია. შენიშვნა: React 19-ში, ref შეიძლება გადაეცეს ჩვეულებრივი prop-ის სახით, ამიტომ forwardRef ხშირად აღარ არის საჭირო.