如何解决导出映射组件时的打字错误

Question

我面临打字错误，而导出地图组件与GoogleApiWrapper。它工作得很好，我没有在GoogleApiWrapper中包装它，我尝试了多种解决方案，但没有人为我工作。任何人请查看代码并提供任何建议。在这个问题上，当我用必要的props调用这个组件时，我得到了props问题。

问题可能与在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)

Answer 1

在google上有很多关于React high - order - components的资料，比如

这是我的建议，尝试如果这工作(至少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} />));