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

Question

Лучший способ — рефы (refs). В функциональных компонентах используют useRef, в классовых — React.createRef(). Реф даёт прямой доступ к DOM-узлу после его создания.

YeaHub · Accepted Answer

1. Функциональные компоненты (хуки)Создание рефа:import { useRef } from 'react'; function MyComponent() { const inputRef = useRef(null); }Привязка к элементу через ref:Доступ к DOM:const focusInput = () => { inputRef.current.focus(); // Установка фокуса на инпут };2. Классовые компонентыСоздание рефа:class MyComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } }Привязка и использование: // Где-то в методе: this.inputRef.current.focus();3. Callback-рефы (устаревший способ, но полезно знать)Пример в классовых компонентах: { this.inputRef = el; }} />Когда использовать рефы:Фокусировка, анимации, измерение размеров элемента.Интеграция с библиотеками (например, D3.js, GreenSock).Ограничения:Нельзя передавать рефы как пропсы между компонентами (для этого используется forwardRef).Избегайте чрезмерного использованияПример с forwardRef (если нужно передать реф дочернему компоненту):const Child = React.forwardRef((props, ref) => ( )); function Parent() { const inputRef = useRef(); return ; }