Forward refs — это фича React, которая позволяет компонентам пробросить полученный ref дальше дочернему компоненту. Это даёт родительским компонентам возможность получить прямой доступ к DOM-элементам потомков, минуя обычную абстракцию компонентов.
По умолчанию функциональные компоненты не могут принимать refs. Forward refs решают эту проблему, позволяя явно включить пробрасывание refs и сделать компоненты более гибкими и переиспользуемыми, когда нужен прямой доступ к DOM.
Используй React.forwardRef(), чтобы обернуть свой компонент:
const ButtonElement = React.forwardRef((props, ref) => (
<button ref={ref} className="CustomButton">
{props.children}
</button>
));
Параметр ref становится вторым аргументом после props.
// Создаёшь ref для прямого доступа к DOM-кнопке
const ref = React.createRef();
// Передаёшь ref компоненту с forwardRef
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>
Теперь ref.current указывает прямо на DOM-элемент <button>, и ты можешь вызывать методы вроде focus() или обращаться к свойствам вроде value.
Функциональные компоненты могут получать refs напрямую без использования React.forwardRef, как это делают классовые компоненты по умолчанию.
Новый — ещё не проверен сообществом
Вы