具有React和第三方库的Webpack HMR

Question

我有一个带有webpack构建的React应用。我正在使用React-Hot-Loader使用Webpack HMR。 我将其配置为文档，除了一个地方，其他所有东西都工作正常。

我有一个非反应库来显示来自地图框API（mapbox-gl）的地图。

在react组件中，我使用<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使用React包装器，例如react-mapbox-gl或react-map-gl？我将调查这些对象，看看是否可以更轻松地显示和使用地图。我目前使用react-mapbox-gl，但是我不知道它与Webpack HMR一起使用的效果如何。