Leaflet-DVF + ReactJs：Uncaught TypeError：无法读取属性＆＃39; call＆＃39;未定义的（...）

Question

当我尝试使用(L.MapMarker and L.ArcedPolyline)库在react组件中添加图层Leaflet-Dvf时，我收到以下错误：

Uncaught TypeError: Cannot read property 'call' of undefined(…)

Leaflet-dvf参考：https://github.com/humangeo/leaflet-dvf

尝试了所有可能的依赖项，但仍然是相同的错误。 普通html中的相同代码工作正常，错误仅在React组件中出现。

以下是代码：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import '../../../node_modules/leaflet-dvf/dist/css/dvf.css';
    import stylingMap from "../scss/decisionmaking.scss";
    import { Map, Marker,Path } from 'leaflet-dvf';
    import '../../../node_modules/leaflet-polylinedecorator/leaflet.polylineDecorator.js';
    import '../../../node_modules/leaflet-dvf/src/leaflet.dvf.markers.js';
    const Decision = React.createClass({    
        componentDidMount() {
            this.map();
        },

        map() {
            var map = L.map('map').setView([2, 20], 2);    
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">'
            }).addTo(map);    
        var marker = new L.MapMarker(new L.LatLng(20.593684, 78.96288), {
          radius: 10,

        });
        map.addLayer(marker);
var arcedPolyline = new L.ArcedPolyline([[20.593684, 78.96288],[37.09024,-95.712891]],{
          distanceToHeight: new L.LinearFunction([0, 5], [800, 200]),
          color: 'blue',
          weight: 2
      });
      map.addLayer(arcedPolyline);
            render: function() {
                return (
                    <div className="decisionmaking">
                    <div id='map' style={{height:500+"px", width:900+"px"}}></div>
                    </div>
            );
        }
        });
        module.exports = Decision;

错误截图：

Answer 1

我还没有使用过React，但根据你的import语句我可以看到一个潜在的问题：L.ArcedPolyline在leaflet.dvf.lines.js中定义而不在leaflet.dvf.markers.js中定义。从dist目录导入leaflet-dvf.js可能有意义，因为它包含所有内容？