Một ref truyền vào một component tùy biến không tự động vươn tới một nút DOM bên trong nó. forwardRef cho phép một component nhận một ref và gắn nó vào một phần tử con. useImperativeHandle tùy biến những gì ref đó lộ ra.
Một ref truyền vào một component tùy biến không tự động vươn tới một nút DOM bên trong nó. forwardRef cho phép một component nhận một ref và gắn nó vào một phần tử con. useImperativeHandle tùy biến những gì ref đó lộ ra.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // ref của cha giờ trỏ tới <input>
});
// cha có thể focus input bên trong:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
Đôi khi bạn không muốn lộ cả nút DOM — chỉ một số phương thức cụ thể:
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} />;
});
// cha: fancyRef.current.focus(); fancyRef.current.clear();
Ưu tiên props/state để giao tiếp. Chỉ dùng ref cho các nhu cầu thực sự mệnh lệnh: quản lý focus, cuộn, chọn văn bản, phát media, hoặc tích hợp thư viện mệnh lệnh. Lưu ý: trong React 19, ref có thể truyền như một prop bình thường, nên forwardRef thường không còn cần thiết.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ