ref yang dilewatkan ke komponen khusus tidak secara otomatis mencapai simpul DOM di dalamnya. forwardRef memungkinkan komponen menerima dan melampirkannya ke elemen anak. menyesuaikan yang dipaparkan oleh itu.
ref yang dilewatkan ke komponen khusus tidak secara otomatis mencapai simpul DOM di dalamnya. forwardRef memungkinkan komponen menerima dan melampirkannya ke elemen anak. menyesuaikan yang dipaparkan oleh itu.
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();
Kadang Anda tidak ingin membocorkan seluruh simpul DOM — hanya metode tertentu:
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();
Lebih suka props/state untuk komunikasi. Gunakan ref hanya untuk kebutuhan yang benar-benar imperative: manajemen fokus, pengguluran, pemilihan teks, pemutaran media, atau integrasi perpustakaan imperatif. Catatan: dalam React 19, ref dapat dilewatkan sebagai prop normal, jadi forwardRef sering kali tidak lagi diperlukan.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma