Как выбрать элемент DOM в React? Что является эквивалентом document.getElementById() в React

В React, в отличие от работы с ванильным JavaScript, прямой доступ к элементам DOM отличается. React использует виртуальный DOM для эффективного обновления реального DOM, в этом его отличие от стандартного JavaScript.

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

Вариант 1: использование ссылок

• Использовать ссылки с функциональными компонентами:(v16.8.0) Используйте useRef и впередСсылка. Определите ссылку с помощью useRef, а затем переправьте ее элементу DOM с помощью frontRef. Чтобы получить доступ к элементу, используйте текущее свойство ссылки (ref.current).

Вариант 2: использование React.createRef (v16.3)

• Создайте ссылку с помощью React.createRef() и прикрепите ее к элементу, чтобы получить к ней доступ позже. Используйте ref.current, чтобы получить узел DOM.

Вариант 3: использование шаблона обратного вызова (устаревший)

• Определите атрибут ref в JSX элемент и передать функцию обратного вызова, которая получает ссылку на элемент DOM.

Option 4. Использование ссылок на строки (устаревшие версии)

• Используйте ссылки на строки, установив атрибут ref в строку, идентифицирующую элемент DOM. Доступ к элементу осуществляется с помощью this.refs.[stringRef].

Пример

Ниже приведен пример использования шаблона обратного вызова для выбора элемента DOM:

  render() {
    return (
      

        
Для доступа к элементам вы можете использовать this.progressBars[0], this.progressBars[1] и this.progressBars[2] для выполнения операций над ними.