Как в React-компоненте получить доступ к нативному DOM-элементу?

Как в React-компоненте получить доступ к нативному DOM-элементу?

• React — UI-библиотека для создания компонентов
• Оптимальный вариант — использовать рефы (refs)
• рефы создаются с помощью React.createRef() или useRef()
• дают возможность напрямую получить ссылку на DOM-узел
• сохраняют унидирекциональную архитектуру React
• предоставляют контролируемый доступ к элементам
• используются для управления фокусом, анимаций и подключения DOM-библиотек
• не следует обращаться к DOM напрямую через селекторы, например document.querySelector
• рефы — стандартный и рекомендуемый паттерн React

Итого: чтобы получить доступ к DOM-элементу из React-компонента, применяют рефы (refs) — это корректный, безопасный и встроенный в React подход.

Подробный ответ

Основной ответ

Для доступа к нативному DOM-элементу в React оптимально использовать рефы (Refs). Они создают прямую ссылку на DOM-элемент или компонент и позволяют взаимодействовать с ним за пределами стандартного жизненного цикла React. Обычно для этого применяют React.createRef() либо хук useRef() в функциональных компонентах.

Ключевые моменты

• В классах применяется React.createRef(): он формирует объект ref, который связывают с элементом через атрибут ref, после чего DOM-элемент доступен через ref.current.
• Для функциональных компонентов с React 16.8+ используется хук useRef(). Он возвращает изменяемый объект, поле .current которого хранит ссылку на DOM-элемент.
• С помощью такой ссылки можно вызывать нативные методы, включая focus() и scrollIntoView(), а также подключать нестандартные библиотеки, которым требуется непосредственная работа с DOM.
• Рефы в React — это исключение, а не правило, поскольку основой библиотеки служит декларативный подход. Прямое обращение к DOM оправдано для анимаций, неуправляемых элементов формы и интеграции с внешним кодом.
• Прямое обращение к DOM через селекторы, например document.getElementById, или изменения за пределами React способны вызвать непредсказуемые ошибки. Поэтому рефы считаются "реактовским" и безопасным способом.

Практический контекст

В React 18+ для большинства новых проектов предпочтение отдают функциональным компонентам и useRef(). Например, фокус можно установить после монтирования:

function InputFocus() {
const inputRef = React.useRef(null);

React.useEffect(() => {
inputRef.current?.focus();
}, []);

return <input ref={inputRef} />;
}

Этот подход согласуется с жизненным циклом React и помогает избежать утечек памяти.