时间戳

首页 > 解决方案 > React-leaflet 自定义组件 - 未传递上下文？

reactjs - React-leaflet 自定义组件 - 未传递上下文？

问题描述

我正在为 react-leaflet 编写一个自定义组件。这是一个可编辑的弹出窗口，还有一些其他功能。 这是一个示例的代码框。组件的源代码在此处。这个例子只是做了import EditablePopup from 'my-react-leaflet-popup-plugin'一个 .js 文件，它是我项目中的一个 .js 文件。效果很好。

我正在尝试使用 webpack 捆绑它以将其打包为节点模块，以便其他人可以使用它。它编译没有问题。你可以在这里看到我的 webpack.config.js 。然后我使用npm link将这个模块链接到我本地机器上的一个测试项目中。当我这样做时，我收到错误消息：

TypeError: Cannot read property 'leafletElement' of null

  460 |   value: function value() {
  461 |     var e = this;
  462 |     this.props.open && setTimeout(function () {
> 463 |       e.thePopup.leafletElement._source.openPopup();
      | ^  464 |     }, .001);
  465 |   }
  466 | }, {

即使我摆脱了那个条款，我也会得到这个：

TypeError: Cannot read property 'openPopup' of undefined


  9226 | // @method openOn(map: Map): this
  9227 | // Adds the popup to the map and closes the previous one. The same as `map.openPopup(popup)`.
  9228 | openOn: function openOn(map) {
> 9229 |   map.openPopup(this);
       | ^  9230 |   return this;
  9231 | },
  9232 | onAdd: function onAdd(map) {

它就像弹出窗口试图将自己添加到地图中，但没有找到父地图组件的地图实例。我的预感是，由于某种原因，当使用 webpack 构建它并将其作为 npm 模块导入时，react-leaflet 映射的上下文没有正确传递给我的组件。我不太明白，因为我的组件只是 react-leaflet<Popup>组件的修饰版本。我作为直接孩子<EditablePopup>使用<Popup>，它本质上应该接收 LeafletConsumer 上下文消费者包装器。

我不确定为什么这个组件在我的项目中链接时效果很好，但是在通过 webpack 构建并通过 npm 导入时出现此错误。

标签： reactjswebpackcustom-componentreact-leaflet

解决方案

我在工作场所遇到了类似的问题，我现在怀疑我们声明 webpack 配置的（类似）方式是罪魁祸首。但对我来说，仅仅改变 libraryTarget 并没有任何效果。在描述了我们的设置后，我的见解如下......

我们有一组可视化组件，我们将它们捆绑到一个“库”中，并将其导入到一个主项目中。主项目需要获取一些外部数据，但需要在整个库组件的任意位置使用。而且我们不想到处传递道具。所以上下文，对吧？除非提供者（我们在“主”项目中设置和初始化）和消费者位于库边界的不同侧，否则消费者的上下文始终未定义（或者更确切地说，无论“createContext”的默认值是什么...我们没有使用初始化程序）。

无论如何，快进一堆。如果我从将库中的每个不同组件列为其自己的独立“条目”（在 webpack 文件中）更改为构建一个 index.js 文件来导入和重新导出所有内容 - 并且仅将该文件包含为单数“entry”（在 webpack 中）——然后事情就开始起作用了。

因为 React 上下文 API 需要共享创建的 Context 对象，但共享的概念（我猜无论如何）是在模块级别。它不能是真正的全球性的。所以不同的入口点、不同的模块、不同的上下文对象。消费者被冷落了。

推荐阅读