forwardRef
- React kursu
- Orta seviye
- Ders 67/80
- 4 dk
Bir alt bileşene ref'i forwardRef ile aktarmayı öğrenirsin.
forwardRef
Bazen bir ref'i alt bileşene geçirmen gerekir. Örneğin bir input bileşeni yazıyorsan ve üst bileşen o input'a odaklanmak istiyorsa, ref'i alt bileşene iletmen gerekir.
Bunun için forwardRef kullanılır. Bileşeni forwardRef ile sarmalarsın; ikinci parametre olarak ref alır ve ilgili DOM öğesine bağlar.
Ref bir prop değildir; normal props içinde gelmez. forwardRef ref'i özel olarak ele alır.
ref'i DOM'a bağlama
forwardRef ile sarmalanan bileşen, ikinci parametre olarak ref alır. Bu ref'i bileşen içindeki bir DOM öğesine ref={ref} ile bağlarsın.
Üst bileşen useRef ile bir ref oluşturur ve bunu alt bileşene ref={myRef} olarak geçirir. Alt bileşen bunu forwardRef ile alır ve ilgili DOM öğesine bağlar. Böylece üst bileşen alttaki DOM öğesine erişebilir.
Bu desen, tasarım sistemi bileşenlerinde yaygındır; üst bileşen alttaki input'a odaklanmak ister.
Uygulama FancyInput bileşeni
Aşağıdaki iskeleti tamamla. FancyInput bileşenini forwardRef ile yaz; (props, ref) alsın ve <input ref={ref} {...props} /> döndürsün. Dışa aktar.
Başlangıç kodu
import { forwardRef } from "react";
// FancyInput bileşenini buraya yazÖrnek çözüm
import { forwardRef } from "react";
const FancyInput = forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});
export default FancyInput;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 forwardRef ne yapar?
- State iletir
- Ref iletir Doğru cevap
- Event yakalar
- Prop filtreler
Açıklama: forwardRef ref'i alt bileşene iletir.
2 forwardRef sarmalama
const FancyInput = ____((props, ref) => {
return <input ref={ref} {...props} />;
});const FancyInput = forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});Açıklama: forwardRef ile bileşen ref parametresi alır.
3 forwardRef: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
forwardRef |
Ref iletir |
ref parametresi |
İkinci argüman |
ref={ref} |
DOM'a bağlar |
useRef |
Ref oluşturur |