Forward Ref решает критическую проблему в Higher-Order Components (HOC): рефы не проходят как обычные props. Поскольку React обрабатывает ref специально (как и key), когда ты оборачиваешь компонент в HOC, реф указывает на самый внешний HOC-обёртку, а не на внутренний обёрнутый компонент.
Когда ты добавляешь реф к компоненту, обёрнутому в HOC, реф указывает на HOC-контейнер, а не на исходный компонент внутри. Это не даёт тебе доступа к методам или свойствам внутреннего компонента.
Используй React.forwardRef(), чтобы явно пробросить рефы через HOC во внутренний компонент. Это позволяет рефам миновать HOC-обёртку и достичь целевого компонента.
function logProps(Component) {
class LogProps extends React.Component {
componentDidUpdate(prevProps) {
console.log('old props:', prevProps);
console.log('new props:', this.props);
}
render() {
const { forwardedRef, ...rest } = this.props;
return <Component ref={forwardedRef} {...rest} />;
}
}
return React.forwardRef((props, ref) => (
<LogProps {...props} forwardedRef={ref} />
));
}
React.createRef()const ref = React.createRef();
<FancyButton label="Click Me" ref={ref} />
ref.current.focus(); // Вызывает метод внутреннего компонента
Forward Ref позволяет HOC корректно exposить наружу экземпляры внутренних компонентов и их методы для родительских компонентов, сохраняя возможность напрямую взаимодействовать с обёрнутыми компонентами несмотря на HOC-обёртку.
Когда ref передаётся в компонент, обёрнутый HOC, без использования forwardRef, ref будет ссылаться на компонент-обёртку HOC вместо внутреннего обёрнутого компонента.
Новый — ещё не проверен сообществом
Вы