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>            </>        )    }}这有点令人沮丧。我不明白他们在寻找什么。我能够让地图与 JSX 一起工作，但不能与 TSX 一起工作。我尝试将道具分配给 MainContainer 但它不会改变任何东西..

Answer 1

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

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);

Answer 2

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

class App extends React.Component<any, any> {

  constructor(props: any) {

    super(props);

    // ... 

  }

}

export default GoogleApiWrapper(

  (props: any) => ({

    apiKey: <your_key>

  }

))(App)

Answer 3

老实说，我没有太大变化。我主要添加了它要求的 <{google}> 参数，它似乎正在寻找它丢失的那个道具。我正在使用 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;