Reactjs GeoJSON事件处理程序未启动

我有以下

.tsx

代码。我正在跟踪，尝试将其移植到React并键入脚本。地图以每个美国州的预期颜色进行渲染，但在多边形上移动光标时，

mouseover

事件从不触发

---

我在上面睡着了，意识到问题是使用了CDN中过时的

.css

文件

index.html

拥有传单css文件的V0.7.7，在撰写本文时，最新版本是V1.6.0。更改为较新版本后，问题立即得到解决

更新：我的问题似乎与此用户遇到的问题相同：

---

再次更新：我移植了interactive choropleth示例，用于React和TypeScript，以防有人想做类似的事情：

我在上面睡着了，意识到问题是使用了CDN中过时的

.css

文件

index.html

拥有传单css文件的V0.7.7，在撰写本文时，最新版本是V1.6.0。更改为较新版本后，问题立即得到解决

更新：我的问题似乎与此用户遇到的问题相同：

再次更新：我已经移植了交互式choropleth示例，用于React和TypeScript，以防有人想做类似的事情：

import React, { Component } from 'react'
import { Map, TileLayer, GeoJSON } from 'react-leaflet'
import { LatLngTuple, PathOptions, Layer, LeafletEvent } from 'leaflet'
import * as states from './states';

type State = {
  lat: number,
  lng: number,
  zoom: number,
}
export default class Choropleth extends Component<{}, State> {
  state = {
    lat: 41.881832,
    lng: -87,
    zoom: 5,
  }

  getColor(d: number) {
    return d > 1000 ? '#800026' :
      d > 500 ? '#BD0026' :
      d > 200 ? '#E31A1C' :
      d > 100 ? '#FC4E2A' :
      d > 50 ? '#FD8D3C' :
      d > 20 ? '#FEB24C' :
      d > 10 ? '#FED976' :
      '#FFEDA0';
  }

  style (feature: GeoJSON.Feature): PathOptions {
    if (feature && feature.properties) {
      return {
        fillColor: this.getColor(feature.properties.density),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
      };
    }
    return {}
  }

  highlightFeature(e: LeafletEvent) {
    console.log('Event handler fired!');
    if (e.target) {
      var layer = e.target;
      layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
      });

    }
  }

  onEachFeature(feature: GeoJSON.Feature, layer: Layer) { 
    // layer.on('mouseover', (e: any) => {console.log('Moused over a polygon!')})
    layer.on({
      mouseover: this.highlightFeature,
    });
  }

  render() {
    const position: LatLngTuple = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom} style={{ width: '100%', height: '100vh' }} onmouseover={(e: any) => { console.log('Hovered over the map!') }}>
        <TileLayer
          attribution='&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
          url='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
        />
        <GeoJSON key='my-geojson' data={states.statesData} style={(poly: any) => { return this.style(poly) }} onEachFeature={(feature: GeoJSON.Feature, layer: Layer) => this.onEachFeature(feature, layer)} />
      </Map>
    )
  }
}

export const statesData: GeoJSON.FeatureCollection   = {
    "type": "FeatureCollection", "features": [
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},
]};