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

Question

我正在尝试在 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>

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

Answer 1

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

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

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