反应属性"方向"不存在

Question

当我尝试运行react-google-maps的示例代码时，我遇到了此错误：

Property 'directions' does not exist on type '{ children?: ReactNode; }'.

我正在尝试运行方向渲染器。代码如下：

import * as React from 'react';
import './App.css';
import { compose, withProps, lifecycle } from "recompose"
import { withGoogleMap, withScriptjs, GoogleMap, DirectionsRenderer } from "react-google-maps"
const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap,
lifecycle({
componentDidMount() {
const DirectionsService = new google.maps.DirectionsService();
DirectionsService.route({
origin: new google.maps.LatLng(41.8507300, -87.6512600),
destination: new google.maps.LatLng(41.8525800, -87.6514100),
travelMode: google.maps.TravelMode.DRIVING,
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.error(`error fetching directions ${result}`);
}
});
}
})
)(props =>
<GoogleMap
defaultZoom={7}
defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
>
{props.directions && <DirectionsRenderer directions={props.directions} />}
</GoogleMap>
);

class App extends React.Component {
public render() {
return (
<div className="App">
<MapWithADirectionsRenderer />
</div>
);
}
}
export default App;

恐怕我是反应方式的新手，我不确定是什么导致了这个错误。有什么想法吗？

Answer 1

若要消除此类错误，请尝试显式指定映射组件属性。

就此而言，可以引入以下类型：

type MapProps = {
children?: React.ReactNode,
directions: google.maps.DirectionsResult
};

然后定义如下的地图组件：

const Map = (props: MapProps) => {
return (
<GoogleMap
defaultZoom={7}
defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
>
{props.directions && <DirectionsRenderer directions={props.directions} />}
</GoogleMap>
);
}

和

const MapWithADirectionsRenderer = compose(
withProps({
containerElement: <div style={{ height: `400px` }} />,
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap,
lifecycle({
componentDidMount() {
const DirectionsService = new google.maps.DirectionsService();

DirectionsService.route({
destination: new google.maps.LatLng(41.8525800, -87.6514100),
origin: new google.maps.LatLng(41.8507300, -87.6512600),
travelMode: google.maps.TravelMode.DRIVING,
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.log(`error fetching directions ${result}`);
}
});
}
})
)(Map);

更新

另一种选择是像这样投props：(props as any).directions

例

<GoogleMap
defaultZoom={7}
defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
>
{(props as any).directions && <DirectionsRenderer directions={(props as any).directions} />}
</GoogleMap>