Интеграция Google Maps в реакции с использованием Refs

Автор оригинала: Thomas Tuts.

Содержание этого учебника извлечено из реагирования в живых классах Thomas Tits .

Вступление

Рейкт Ref Обеспечивает простой способ доступа к узлам и компонентам DOM, а также интегрировать стороннюю Библиотеки в наших комментариях реагирования. Давайте кратко посмотрим, как мы можем использовать Regive Ref атрибут, чтобы подключить наш компонент с базовым Google Интеграция карты. Как упражнение, мы сделаем карту, используя карты Google, которые начинаются на Эйфелевой башне, И имеет кнопку, которая сковой нас вплоть до дуги. Простые вещи, но это должно быть достаточно Чтобы выставить вас и работать с использованием Refs. Конечно, не стесняйтесь изменить вещи, как вы видите подходящие!

Вот демонстрация конечного продукта:

Мы собираемся написать наш код в ES2015, поэтому требуется некоторое знакомство со своим синтаксисом. Чтобы избежать необходимости установить целую систему сборки, мы вместо этого мы будем использовать кодепен.

Что такое реф?

Ref Это специальный атрибут в реакции, который вы можете использовать для хранения Ref Эрнс этого компонента или узла DOM. Затем вы можете получить доступ к тому, что компонент React (или DOM NODE) и делать с ним все. Имейте в виду что, когда вы прикрепляете Ref на узел DOM вы получаете доступ к этому узлу, тогда как Ref на Актуальный компонент, вместо этого получат ссылку на экземпляр компонента. Ref атрибут берет Функция, либо строка, которая передается так же, как вы проходите в опоре.

Когда вы проходите в функции, эта функция выполняется, когда компонент установлен и размонтированный. Затем вы можете сделать вещи с компонентом или хранить его на более позднее использование.

Когда вы проходите в строке вместо этого, вы можете получить доступ к компоненту, используя this.refs.refname Отказ Держать Вещи просты, мы будем использовать строковый метод доступа к нашему ref.

Почему вы бы использовали REF

Предположим, вы хотите добавить пользовательскую полосу прокрутки на ваш причудливый компонент. Для этого вы можете использовать что-то вроде Perfect-Scrollbar Отказ Если вы проверите документацию, вы заметите Что нам нужно пройти его элемент DOM, чтобы он мог инициализировать и добавлять дополнительные элементы DOM для обеспечения Пользовательская прокрутка:

var container = document.getElementById('container');
Ps.initialize(container);

Мы можем использовать Ref вот перейти к Ps.initialize () Отказ

Как уже упоминалось ранее, вы также можете использовать Ref Для доступа к компоненту реагирования. Вы можете получить доступ к тому, что Экземпляр компонента в его родителе. Например, это может быть удобно вызвать метод на дочернем компоненте для очистки ввода поле после того, как родительский компонент завершил обработку пропущенных данных. Вы также можете использовать состояние для этого, но это решение немного чище.

Упражнение: Google Maps

Вы можете найти основную настройку для упражнения на Кодепен Отказ

Когда вы открываете страницу, вы, скорее всего, получите ошибку Google Maps. Это потому, что нам нужно сначала добавить наш собственный ключ API. Давайте начнем!

Добавление ключа Google API

Чтобы получить ключ для Google Maps JS API, следуйте Эти инструкции Отказ Однажды У вас есть ключ, подключите его к упражнению кодом, щелкнув значок COG рядом с JS.

В модальном модальном стиле вы увидите список всех наших внешне загруженных внешних зависимостей (React, Reactry и Maps Google Maps JS API). В последнем, который говорит https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initmap , заменить Your_api_key с тем, который вы только что сгенерировали.

Рендеринг начальной карты

Теперь, когда наши карты Google были подключены к ключу API, давайте возьмем его для спина. Для доступа к DOM узел, чтобы сделать нашу карту, нам нужно добавить Ref первый:

// In the Map's render() method
return (
  
I should be a map!
);

Теперь, когда мы можем получить доступ к нашему Ref, мы будем использовать ComponentDidMount () Способ жизненного цикла для экземпляра карта:

componentDidMount() {
  this.map = new google.maps.Map(this.refs.map, {
    center: EIFFEL_TOWER_POSITION,
    zoom: 16
  });
}

Почему мы используем ComponentDidMount () ? Если мы использовали ComponentWillMount () У нас не было бы доступа к Наши ссылки, потому что в этот момент наш компонент пока не существует, но это Будет ли Отказ Когда это имеет Установлен (т.е. ComponentDIDMount () , у нас есть доступ к представлению DOM нашего компонента, и мы можем получить доступ к нашему Ref . Этот материал не должен идти в рендеринг () , потому что Визуализация () Can Получить Вызванные несколько раз в жизненном цикле компонента (каждый раз воссоздая карту, потерять вашу позицию).

Еще важнее: а Render () Метод должен быть Чистый и свободный от любых побочных эффектов! Побочные эффекты Есть такие вещи, как сделать запрос XHR, модифицирующие переменные за пределами объема функции, написание Данные, манипулирующие домом и так далее. Рендер должен быть обеспокоен только возвращением представительства компонента на основе его текущих реквизитов и состояний. Это все!

Панорамирование в Триумфальную дугу

Наконец, давайте добавим кнопку, которая скользит на карту в Trimphe Arc. Во-первых, мы добавим кнопку на наш компонент вместе с обработчиком клика:

return (
  

    Go to Arc De Triomphe
    
I should be a map!
  
);

Возможно, вы заметили, что я не возвращаюсь не только на карту

Чтобы добавить логику обработчика щелчка, нам сначала нужно знать, как мы можем достичь панорамирования на картах Google JS API. Мы можем использовать Google Maps JS API Ссылка Чтобы найти это. К счастью, есть .Panto () Метод, который занимает latlng пара, как тот, который мы использовали для создания эффектов карта. Давайте добавим метод для PAN в нужное место:

panToArcDeTriomphe() {
  this.map.panTo(ARC_DE_TRIOMPHE_POSITION);
}

Если вы нажмете кнопку, вы заметите, что карта еще не работает. Это потому, что реагировать ES2015 Компоненты Не автобинд Ваши методы для вас. В .pantoarcdetrioomphe () Метод, мы не иметь доступ к правильному объему и не может получить доступ к this.map Отказ Чтобы исправить это, вы можете использовать .bind () к Создайте новую функцию, которая имеет правильный объем. Это можно сделать либо при определении обработчика щелчка или в Ваш конструктор. Я предпочитаю размещать .bind () Вещи в конструкторе, так как это немного очиститель:

constructor() {
  super();
  this.panToArcDeTriomphe = this.panToArcDeTriomphe.bind(this);
}

Если вы нажмете кнопку сейчас, он должен загрузить карту в нужное место. Если вы чувствуете, что вы пропустил что-то или запустил в любые ошибки, проверьте Решение на кодепене Если вам нужен подтолкнувшись в правильном направлении.

Нашел этот учебник полезным? Обязательно Зарегистрируйтесь Для аккумулятора реагирования в реакции, где вы можете научиться реагировать с реакцией живого инструктора! Вы также можете найти оригинальный блог Thomas Post здесь Отказ