Webpack HMR с React и сторонней библиотекой

Question

У меня есть приложение React со сборкой веб-пакета. Я использую Webpack HMR с использованием React-Hot-Loader. Я настроил это как документацию, и все работает нормально, за исключением одного места.

У меня есть не реагирующая библиотека для отображения карты из API-интерфейса map-box (mapbox-gl).

В компоненте реагирования я создаю <div> с ref и инициализирую код mapbox-gl в методе ComponentDidMount. Я запускаю этот код на ComponentDidMount:

ComponentDidMount() {

    const map = new mapboxgl.Map({
          container: this._map_div_ref,
           .....
        })
}

Когда эта карта используется в webpack-HMR, код в ComponentDidMount не запускается, поэтому, когда HMR обновляет браузер, он очищает map_div

Есть ли способ сообщить webpack-HMR, что нужно запускать этот код?

Answer 1

Попробуйте переместить экземпляр вашей карты над заголовком класса, но под импортом.Например:

import React ...

const map = new mapboxgl.Map({
// map options 
)}

class Map extends Component { 

Редактировать: Рассматривали ли вы также использование обертки реагирования для Mapbox, например act-mapbox-gl или реаги-карта-ГЛ ?Я бы посмотрел в те, чтобы увидеть, будет ли проще отображать и играть с картой.В настоящее время я использую response-mapbox-gl, но я не знаю, насколько хорошо он будет работать с Webpack HMR.