Google-Maps-React 与 TypeScript。参数错误

Question

所以我正在为这个文件使用 TypeScript。

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'xxx'
})(MapContainer)


export default GoogleMap;

但是，MapContainer 在最后一个函数出现错误：

Argument of type 'typeof MapContainer' is not assignable to parameter of type 'ComponentType<IProvidedProps>'.
  Type 'typeof MapContainer' is not assignable to type 'ComponentClass<IProvidedProps, any>'.
    Construct signature return types 'MapContainer' and 'Component<IProvidedProps, any, any>' are incompatible.
      The types of 'props' are incompatible between these types.
        Type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<IProvidedProps> & Readonly<{ children?: ReactNode; }>'.
Property 'google' is missing in type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' but required in type 'Readonly<IProvidedProps>'.ts(2345)

这有点令人沮丧。我不明白他们在寻找什么。我能够让地图与 JSX 一起工作，但不能与 TSX 一起工作。我尝试将道具分配给 MainContainer 但它没有改变任何东西..

Answer 1

我将粘贴部分适用于 .TSX 的代码

class App extends React.Component<any, any> {
  constructor(props: any) {
    super(props);

    // ... 
  }
}

export default GoogleApiWrapper(
  (props: any) => ({
    apiKey: <your_key>
  }
))(App)

Answer 2

老实说，我并没有改变太多。我主要添加了它所要求的 参数，它似乎正在寻找它丢失的那个道具。我正在使用 Visual Studio Code，它有时对我来说处理错误的速度也很慢，这可能会首先说明为什么会出现问题。

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component<{google}>{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'xxx'
})(MapContainer)


export default GoogleMap;

Answer 3

如果有人想要一种功能组件的方式来实现这一点并让它识别道具，只需参考包装器。

import { useState } from 'react';
import PlacesAutocomplete from 'react-places-autocomplete';
import { GoogleApiWrapper, IProvidedProps } from 'google-maps-react';

interface PlacesAutocompleteProps {
    value: string;
    disabled?: boolean;
    onChange: () => void;
    counrtyResctrictions?: string[];
}

const PlacesAutoComplete = ({
    onChange,
    value,
    disabled,
    counrtyResctrictions = [],
}: PlacesAutocompleteProps & IProvidedProps) => {
    
    return (
        <PlacesAutocomplete>
        </PlacesAutocomplete>
    );
};

export default GoogleApiWrapper({
    apiKey: process.env.REACT_APP_FB_API_KEY!,
    language: 'en',
})<PlacesAutocompleteProps & IProvidedProps>(PlacesAutoComplete);