导出地图组件时如何解决打字稿错误

问题描述

我在使用 GoogleApiWrapper 导出地图组件时遇到打字稿错误。它工作正常，我没有将它包装在 GoogleApiWrapper 中，我尝试了多种解决方案，但没有人为我工作。任何人请查看代码并提供任何建议。遇到这个问题，当我用必要的道具调用这个组件时，我遇到了道具问题。

问题可能与将我的组件包装在 GoogleApiWrapper 中有关。

import { GoogleApiWrapper,Map,Marker } from "google-maps-react";
import React from "react";
import "./GoogleMap.css";
import Autocomplete from 'react-google-autocomplete';
import {connect} from 'react-redux'
export interface GoogleMapProps {
    google?: any | undefined,position: any,mapStyles?:any,mapColor?:any,handleSelect:(place: any)=>void,onAddressChange: (address: any) => void;
    countryID:string,}
const GoogleMap: React.FC<GoogleMapProps> = (props:GoogleMapProps ) => {
    const {position,mapStyles,mapColor,handleSelect,countryID}=props;
    const renderMap = () => {
        return (
            <div>
                <div style={{ width: '100%',height: '270px' }}>
                    {
                        <Map
                            google={props.google}
                            initialCenter={position}
                            center={position}
                            zoomControl={false}
                            mapTypeControl={false}
                            style={mapStyles}
                            scaleControl={false}
                            streetViewControl={false}
                            fullscreenControl={false}
                            containerStyle={{
                                position: 'absolute',width: '95%',height: '40%',borderRadius: '12px',}}
                            onReady={(mapProps,map) => {
                                console.log("Map is ready")
                            }}
                            styles={mapColor}
                        >
                            <Marker
                                position={position}
                            />
                        </Map>
                    }
                </div>
                <Autocomplete
                    className={"autocomplete_input"}
                    style={{ width: '100%' }}
                    placeholder={"Type your address"}
                    onPlaceSelected={(place: any) => {
                        handleSelect(place)
                    }}
                    types={['(regions)']}
                    componentRestrictions={{ country: countryID }}
                />
                <svg className="svg_icon" width="23" height="25" viewBox="0 0 23 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22.5789 20.7516L18.3102 16.0781C18.1175 15.8672 17.8563 15.75 17.5823 15.75H16.8844C18.0661 14.0953 18.7683 12.0141 18.7683 9.75C18.7683 4.36406 14.7822 0 9.86273 0C4.94326 0 0.957153 4.36406 0.957153 9.75C0.957153 15.1359 4.94326 19.5 9.86273 19.5C11.9307 19.5 13.8317 18.7313 15.3431 17.4375V18.2016C15.3431 18.5016 15.4501 18.7875 15.6428 18.9984L19.9115 23.6719C20.3139 24.1125 20.9647 24.1125 21.3629 23.6719L22.5746 22.3453C22.9771 21.9047 22.9771 21.1922 22.5789 20.7516ZM9.86273 15.75C6.83569 15.75 4.38238 13.0688 4.38238 9.75C4.38238 6.43594 6.83141 3.75 9.86273 3.75C12.8898 3.75 15.3431 6.43125 15.3431 9.75C15.3431 13.0641 12.8941 15.75 9.86273 15.75Z" fill="#96A7AF" />
                </svg>
            </div>
        )
    }
    return (
        <React.Fragment>
            {renderMap()}
        </React.Fragment>
    )
}
export default GoogleApiWrapper(
    () => ({
      apiKey: "....key here...."
    }
  ))(GoogleMap)

解决方法

google 上有很多关于 React 高阶组件的资料，like this for example

这是我的建议，试试看是否有效（至少 TS 编译器没有抱怨任何事情）：

// make 'google' not optional to satisfy props for wrapper 
export interface GoogleMapProps {
    google: any,position: any,mapStyles?:any,mapColor?:any,handleSelect:(place: any)=>void,onAddressChange: (address: any) => void;
    countryID:string,}

...

// compose components like this:
export default GoogleApiWrapper(({apiKey: "....key here...."}))<GoogleMapProps>((props) => (<GoogleMap {...props} />));