🤔 Как обратиться к дом-дереву в реакте?

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

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

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Получаем доступ к DOM-элементу через реф
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

export default MyComponent;

Пример с использованием функционального компонента и хуков

import React, { useRef, useEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  useEffect(() => {
    // Получаем доступ к DOM-элементу через реф
    myRef.current.focus();
  }, []);

  return <input type="text" ref={myRef} />;
};

export default MyComponent;

🟠Манипуляции через стандартные методы JavaScript
Иногда нужно обращаться к DOM-элементам, используя стандартные методы, такие как document.getElementById или document.querySelector. Это не рекомендуется, так как это противоречит философии React по работе с виртуальным DOM, но может быть полезно в некоторых случаях.

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const element = document.getElementById('my-element');
    element.style.color = 'red';
  }, []);

  return <div id="my-element">Hello, world!</div>;
};

export default MyComponent;

🟠Манипуляции через хуки
React предлагает несколько хуков, которые могут быть использованы для управления жизненным циклом компонентов и обращения к DOM-элементам.
useEffect: Хук для выполнения побочных эффектов.
useLayoutEffect: Похож на useEffect, но выполняется синхронно после всех изменений DOM.

import React, { useRef, useLayoutEffect } from 'react';

const MyComponent = () => {
  const myRef = useRef(null);

  useLayoutEffect(() => {
    // Получаем доступ к DOM-элементу через реф
    myRef.current.style.color = 'blue';
  }, []);

  return <div ref={myRef}>Hello, world!</div>;
};

export default MyComponent;

Ставь 👍 и забирай 📚 Базу знаний