Что такое refs и как они используются?

Question

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

YeaHub · Accepted Answer

Refs в React предоставляют способ получения доступа к DOM-элементам или экземплярам классовых компонентов. Они создаются с помощью React.createRef() или хуком useRef() в функциональных компонентах.Пример использования refs с классовым компонентом:class MyComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } focusInput = () => { this.inputRef.current.focus(); }; render() { return (

); } }В этом примере inputRef используется для получения доступа к инпуту и фокусировки на нем при нажатии на кнопку.В функциональных компонентах это делается с помощью useRef:import React, { useRef } from 'react'; function MyComponent() { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return (

); }Refs полезны для выполнения манипуляций с DOM, таких как управление фокусом, выполнение анимаций или интеграция с библиотеками, которые требуют доступ к элементам. Однако следует использовать их с осторожностью, так как это может нарушить принципы однонаправленного потока данных в React.