საბეჭდი ref რომელიც გადასცემთ custom კომპონენტს არ მიდის ავტომატურად DOM კვანძამდე მის შიგნით. forwardRef საშუალებას აძლევს კომპონენტს მიიღოს და მიამაგროს იგი შვილი ელემენტზე. ხელახლა განსაზღვრავს აჩენს ეს .
საბეჭდი ref რომელიც გადასცემთ custom კომპონენტს არ მიდის ავტომატურად DOM კვანძამდე მის შიგნით. forwardRef საშუალებას აძლევს კომპონენტს მიიღოს და მიამაგროს იგი შვილი ელემენტზე. ხელახლა განსაზღვრავს აჩენს ეს .
refuseImperativeHandlerefconst 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 ხშირად აღარ არის საჭირო.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა