javascript - React-Leaflet:未捕获类型错误:pointToLayer 不是函数

标签 javascript reactjs leaflet react-leaflet

我正在尝试在 GeoJSON 组件中使用 pointToLayer 参数。我在组件外部(不同的文件)定义了函数 pointToLayer ,但出现了该错误。

Map.js:

import {pointToLayer} from '../helpers/helper-country-point';
<GeoJSON>
      key={_.uniqueId()}
      data={this.props.activeCountry.geojson}
      pointToLayer={pointToLayer(this)}
 ></GeoJSON>

文件 ../helpers/helper-country-point 是:

import L from 'leaflet';
export function pointToLayer(feature, latlng) {
  return L.circleMarker(latlng, {
    color: 'white',
    fillColor: 'white',
    fillOpacity: .8,
    radius: 3,
    stroke: false
  }).bindPopup("MESSAGE") // Change marker to circle
}

当我在 Map.js 中定义 pointToLayer 并使用时:

<GeoJSON
 key={_.uniqueId()}
 data= {this.props.countrySelected.geojson}
 pointToLayer={this.pointToLayer.bind(this)}
 ></GeoJSON>

它有效。知道为什么我总是收到此错误吗?

最佳答案

在第一个中,您调用该函数并使用 this 作为参数。

在第二个中,您没有调用该函数。您只需将函数作为 props 传递即可。您可以尝试删除第一个示例中的 (this) 部分,这样您只传递该函数而不调用它。

然后,由于错误是 pointToLayer is not a function,当你在 map.js 中声明该函数时它就解决了,我怀疑你可能已经写了helper.js 文件的路径错误。

关于javascript - React-Leaflet:未捕获类型错误:pointToLayer 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48070432/

相关文章:

javascript - 来自变量的地理服务器层

javascript - 使用 jquery 编辑 iframe 内容

javascript - 如何在 Javascript 中使用新日期执行条件?

javascript - 将 CSS 文件的内容作为文本导入和读取 (React/webpack)

reactjs - 在 react-router 的路由内进行基于路由的测试的推荐方法

d3.js - 缩放时如何让 d3 svg 点保持在传单 map 上的正确位置?

java - 运行Rhino时出错

php - 如何使 javascript/php 聊天室在加载时间和 SQL 通信方面更加高效

javascript - 如何在 JavaScript 函数中使用单引号(撇号)转义 JSON 值

javascript - 从 geoJson 中提取提要级别元数据以用作 Leaflet 消息框