Реагировать с ссылкой

В этой статье мы обсудим манипулирование элементами DOM с помощью Ref непосредственно с помощью React.

React Framework создает ваши компоненты и абстрагирует ваш код от манипулирования внутри DOM, но оставляет дверь открытой для доступа разработчиков. Причина в нескольких случаях, когда это может быть необходимо. Вот почему React предоставляет аварийный выход, известный как refs.

Refs — это функция, которая используется для доступа к DOM из компонентов. Вам нужно только прикрепить ref к элементу в вашем приложении, чтобы обеспечить доступ к нему из любого места внутри вашего компонента, не используя реквизиты и все такое.

Мы также можем использовать ссылки для прямого доступа к элементам React и использовать с ними обратные вызовы.

Мы должны использовать refs только тогда, когда требуемое взаимодействие не может быть достигнуто с помощью состояния и реквизита.

Использовать ссылки

Мы можем использовать refs, чтобы делать все, что нужно манипулировать в DOM. Некоторые хорошие случаи, такие как фокус, тестовый выбор, воспроизведение мультимедиа, запуск обязательных анимаций или интеграция со сторонней библиотекой DOM.

Примечание. Нам следует избегать использования ссылок, потому что это устраняет цель использования React. Например, если вы хотите показать и скрыть компонент popup. Мы должны использовать для этого логическое значение вместо того, чтобы манипулировать dom.

Создание ссылок

Мы можем использовать React.createRef()method для создания ссылок, а затем мы можем подключиться к элементу Dom через атрибут ref, после чего мы можем получить доступ и изменить этот элемент через ссылку.

class App extends React.Component {
  constructor(props) {  
    super(props);  
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />; 
  }
}

В приведенном выше коде мы создали this.myRef в конструкторе, вызвав метод React.createRef().

Затем в методе render мы прикрепили возвращаемое значение к ref элемента div, ссылка на узел становится доступной по атрибуту current элемента ref.

Мы не должны использовать атрибут ref для функциональных компонентов, потому что у них нет экземпляров.

React назначит свойство current элементу Dom при монтировании компонента и присвоит ему значение null при размонтировании компонента.

ref обновления происходят до componentDidMount или componentDidUpdate методов.

Мы можем передавать refs в качестве реквизита для компонента. Пример:

function MyCustomTextInput ({ myInputRef }) {  
  return <input ref={myInputRef} />;  
}

class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.myInputRef = React.createRef();  
  } 
  
  componentDidMount() {  
    this.myInputRef.current.focus();  
  }
  
  render() {  
    return <MyCustomTextInput inputRef={this.myInputRef} />;  
  }
}

В приведенном выше коде App передал свою ссылку в качестве реквизита компоненту MyCustomTextInput.

Обратный звонок

Мы можем создать ref другим способом, называемым callback refs; это дает нам более тонкий контроль над тем, когда ссылки устанавливаются и сбрасываются внутри компонента.

Вместо передачи ref, возвращаемого методом createRef(), мы передадим функцию атрибуту ref. Функция получает экземпляр компонента React или элемент DOM, который можно сохранить и получить к нему доступ где угодно.

class App extends React.Component {  
  componentDidMount() {  
    this.input.focus();  
  } 
  
  render() {  
    return (    
        <input ref={element => (this.input = element)} />;   
    );  
  }  
}

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

Мы можем передавать ссылки обратного вызова между компонентами. Пример:

function MyCustomTextInput({ inputRef }) {  
  return <input ref={inputRef} />;  
}

class App extends React.Component {  
  componentDidMount() {  
    this.myInputElement.focus();  
  } 
  render() {  
    return <MyCustomTextInput inputRef={el => (this.myInputElement = el)} />;  
  } 
}

В приведенном выше коде мы передали функцию inputRef и получили к ней доступ в компоненте App, поэтому мы можем вызвать focus для этого, чтобы сфокусировать элемент ввода.

Предостережения относительно ссылок обратного вызова

Ссылки обратного вызова вызываются два раза во время обновлений, если они определены как встроенная функция. Это связано с тем, что при каждом рендеринге создается новый экземпляр функции. Мы можем избежать этого, назвав его методом класса.

Чтобы больше узнать о React refs. Читать https://reactjs.org/docs/refs-and-the-dom.html

Первоначально опубликовано на https://www.loginradius.com.