react-google-maps - 属性“方向”不存在

Question

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

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

我正在尝试运行directions renderer。代码如下：

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;

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

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>