Блог

Я использую библиотеку 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.

Вы не можете точно использовать props их в функциональных компонентах, так как они действительно используются только в компонентах, основанных на классах. Но есть способ имитировать их функциональность. Поскольку вы имеете дело с функциональными компонентами, вы хотели бы использовать крючки реакции (useState), как вы уже делаете. Так же, как и в компонентах, основанных на классах, не будет большой разницы с точки зрения передачи данных. Ниже приведен фрагмент кода, а вот пример: 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;