将带有react-leaflet模块的json数据加载到GeoJSON中不起作用

Question

[尝试将geojson信息加载到我的传单地图中时，出现此错误：

Failed to compile

C:/Users/ACE/WebstormProjects/shuhelfinalyearprojectbsc/src/components/SimpleExample.tsx
TypeScript error in C:/Users/ACE/WebstormProjects/shuhelfinalyearprojectbsc/src/components/SimpleExample.tsx(44,21):
No overload matches this call.
  Overload 1 of 2, '(props: Readonly<GeoJSONProps>): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error.
    Type '{ "type": string; "properties": { "name": string; "amenity": string; "popupContent": string; }; "geometry": { "type": string; "coordinates": number[]; }; }' is not assignable to type 'GeoJsonObject'.
      Types of property 'type' are incompatible.
        Type 'string' is not assignable to type '"Feature" | "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon" | "GeometryCollection" | "FeatureCollection"'.
  Overload 2 of 2, '(props: GeoJSONProps, context?: any): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error.
    Type '{ "type": string; "properties": { "name": string; "amenity": string; "popupContent": string; }; "geometry": { "type": string; "coordinates": number[]; }; }' is not assignable to type 'GeoJsonObject'.  TS2769

    42 |                  easeLinearity={0.35}>
    43 |                 <GeoJSON
  > 44 |                     data = {dataJson}
       |                     ^
    45 |                 />
    46 | 
    47 |                 <TileLayer

我以GeoJSON格式创建此变量：

 const dataJson = {
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-104.99404, 39.75621]
            }
        };

这是发生问题的我的组件代码：

<Map center={position} 
     zoom={this.state.zoom}
     maxZoom={this.state.zoom}
     attributionControl={false}
     zoomControl={false}
     doubleClickZoom={false}
     scrollWheelZoom={false}
     dragging={false}
     animate={false}
     easeLinearity={0.35}>

     <GeoJSON
        data = {dataJson}
     />

     <TileLayer
         attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
     />
</Map> 

有人可以指出问题所在吗？

Answer 1

我发现了问题。我的文件是打字稿文件（.tsx），而不是常规js。我使用的示例是用js编写的，我将其改编为tsx，但是tsx似乎对数据格式更为严格，因此显示了此编译错误。

要解决此问题，而不是使用导入，我必须根据用户的要求加载react-leaftlet组件。