带有 React 和第三方库的 Webpack HMR答案

【问题标题】：Webpack HMR with React and third party library带有 React 和第三方库的 Webpack HMR
【发布时间】：2019-07-09 15:16:07
【问题描述】：

我有一个带有 webpack 构建的 React 应用程序。我正在使用使用 React-Hot-Loader 的 Webpack HMR。我将它配置为文档，除了一个地方，一切都运行良好。

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

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

ComponentDidMount() {

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

这个map在webpack-HMR中使用时，ComponentDidMount上的代码不会运行，所以当HMR更新浏览器时，会清空map_div

有没有办法告诉 webpack-HMR 运行该代码？

【问题讨论】：

【解决方案1】：

尝试将您的地图实例移动到您的类标题上方但在您的导入下方。例如：

import React ...

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

class Map extends Component {

编辑：您是否也考虑过为 Mapbox 使用反应包装器，例如 react-mapbox-gl 或 react-map-gl？我会研究这些，看看是否更容易显示和使用地图。我目前使用 react-mapbox-gl，但我不知道它与 Webpack HMR 的配合效果如何。

【讨论】：

不幸的是，使用 mapbox-gl (react-mapbox-gl) 的反应包装器并不容易。团队告诉我这个包装器不支持他们想做的事情。回到你的建议，我不能这样做，因为我必须将我从我正在创建的 React 的 Ref 属性中获得的 div 名称传递给 mapbox。