Ref, переданная пользовательскому компоненту, не автоматически достигает DOM-узел внутри него. forwardRef позволяет компоненту получить ref и присоединить его к дочернему элементу. useImperativeHandle настраивает то, что эта ref предоставляет.
= ( () {
;
});
ref = ();
;
Иногда вы не хотите раскрывать весь 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 для коммуникации. Обращайтесь к refs только для действительно императивных потребностей: управление фокусом, прокрутка, выделение текста, воспроизведение медиа или интеграция императивных библиотек. Примечание: в React 19 ref можно передать как обычный prop, поэтому forwardRef часто больше не требуется.