使用React和第三方库的Webpack HMR

Question

我有一个带有webpack版本的React应用程序。我使用的是使用React-Hot的Webpack HMR。我将其配置为文档，除了一个地方之外，一切都工作得很好。

我有一个非react库来显示来自map-box API (mapbox-gl)的地图。

在react组件中，我使用ref创建了一个<div>，并将mapbox-gl代码初始化为ComponentDidMount方法。我在ComponentDidMount上运行以下代码：

ComponentDidMount() {

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

当此地图用于webpack地图时，ComponentDidMount上的代码不会运行，因此当地图更新浏览器时，它会清空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的配合效果如何。