我想将 props(origin, destination) 传递给 Map.js 以用于 DirectionsRenderer

Question

我正在使用 DirectionsRenderer react-google-maps 库来渲染两点之间的目的地。我想在 Map.js 文件中为起点和终点传递自定义道具， 这是我的代码；

import React from 'react'
import { withScriptjs } from "react-google-maps";
import Map from './Map'

const Directions = ({ origin, destination }) => {

    const MapLoader = withScriptjs(props => <Map {...props} />);

  return (

<div className="App">
  <MapLoader
      googleMapURL="https://maps.googleapis.com/maps/api/js?key="
      loadingElement={<div style={{ height: `100%` }} />}
  />
</div>
  );
}

export default Directions


Map.js

    import React, { useEffect, useState } from "react";
import {
    withGoogleMap,
    GoogleMap,
    DirectionsRenderer
} from "react-google-maps";

function Map({props})  {
    const [directions, setDirections] = useState(null)

   useEffect(() => {
    const google = window.google
    const directionsService = new google.maps.DirectionsService();

    const origin = { lat: 23.6238, lng: 90.5000};
    const destination = { lat: 23.8103, lng:  90.4125 }

    directionsService.route(
        {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
            
        },
        (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
                console.log(result)
                setDirections(result)
            } else {
                console.error(`error fetching directions ${result}`);
            }
        }
    );
   }, [])

    const GoogleMapExample = withGoogleMap(props => (
        <GoogleMap
            defaultCenter={{ lat: 23.8103, lng:  90.4125 }}
            defaultZoom={17}
        >
            <DirectionsRenderer
                directions={directions}
            />
        </GoogleMap>
    ));

    return (
        <div>
            <GoogleMapExample
                containerElement={<div style={{ height: `400px`, width: "500px" }} />}
                mapElement={<div style={{ height: `100%` }} />}
            />
        </div>
       );
    }

export default Map;

在这里，我想从根路由（Directions.js）获取目的地和起点。 有人告诉我如何将其作为道具传递给 Map.js。

Answer 1

您不能在功能组件中完全使用props，因为它们实际上只用于基于类的组件中。但是有一种方法可以模仿它们的功能。由于您正在处理功能组件，因此您可能希望像您已经在做的那样使用React hooks (useState)。就像在基于类的组件中一样，在传递数据方面不会有太大差异。以下是代码 sn-p 和示例：https://stackblitz.com/edit/directions-eo8c6v

index.js

    import React, { Component } from "react";
    import { render } from "react-dom";
    import { withScriptjs } from "react-google-maps";
    import Map from "./Map";
    import "./style.css";
    
    const { useState } = React;
    const App = () => {
      const MapLoader = withScriptjs(Map);
      const [origin, setOrigin] = useState({ lat: 23.6238, lng: 90.5 });
      const [destination, setDestination] = useState({
        lat: 23.8103,
        lng: 90.4125
      });
    
      return (
        <MapLoader
          googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
          loadingElement={<div style={{ height: `100%` }} />}
          origin={origin}
          destination={destination}
        />
      );
    };
    
    render(<App />, document.getElementById("root"));

Map.js

    import React, { Component } from "react";
    import {
      withGoogleMap,
      withScriptjs,
      GoogleMap,
      DirectionsRenderer
    } from "react-google-maps";
    
    const { useEffect, useState } = React;
    
    function Map({ origin, destination }) {
      const [directions, setDirections] = useState(null);
    
      useEffect(() => {
        const google = window.google;
        const directionsService = new google.maps.DirectionsService();
    
        //const origin = { lat: 23.6238, lng: 90.5 };
        //const destination = { lat: 23.8103, lng: 90.4125 };
    
        directionsService.route(
          {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
          },
          (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              console.log(result);
              setDirections(result);
            } else {
              console.error(`error fetching directions ${result}`);
            }
          }
        );
      }, []);
    
      const GoogleMapExample = withGoogleMap(props => (
        <GoogleMap defaultCenter={{ lat: 23.8103, lng: 90.4125 }} defaultZoom={17}>
          <DirectionsRenderer directions={directions} />
        </GoogleMap>
      ));
    
      return (
        <div>
          <GoogleMapExample
            containerElement={<div style={{ height: `400px`, width: "500px" }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />
        </div>
      );
    }
    
    export default Map;