Как сослаться на элемент DOM в React

Узнайте, как изменить элемент DOM в React

React отлично абстрагирует от вас DOM при создании приложений.

Но что, если вы хотите получить доступ к элементу DOM, который представляет компонент React?

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

Какова бы ни была причина, хорошая практика - убедиться, что нет другого способа сделать это без прямого доступа к DOM.

В JSX вашего компонента вы можете назначить ссылку на элемент DOM свойству компонента, используя этот атрибут:

ref={el => this.someProperty = el}

Поместите это в контекст, например, с помощьюbuttonэлемент:

<button ref={el => (this.button = el)} />

buttonотносится к свойству компонента, которое затем может использоваться методами жизненного цикла компонента (или другими методами) для взаимодействия с DOM:

class SomeComponent extends Component {
  render() {
    return <button ref={el => (this.button = el)} />
  }
}

В функциональном компоненте механизм такой же, вы просто избегаете использованияthis(поскольку он не указывает на экземпляр компонента) и вместо этого используйте свойство:

function SomeComponent() {
  let button
  return <button ref={el => (button = el)} />
}

Скачать мою бесплатнуюСправочник по React

Как сослаться на элемент DOM в React

Узнайте, как изменить элемент DOM в React

Больше руководств по реакции: