как передать данные из одного компонента в другой компонент

Question

Я создал два компонента. один для карты, а другой для некоторых входов. У меня есть два входа, чтобы получить широту и долготу. Я передаю долготу и широту, которые я получил от пользователя, моему другому компоненту, используя longitude= {this.state.longitude} latitude = {this.state.latitude}. Если пользователь не ввел долготу и широту или очистил ввод, он должен показать эти координаты lat: 22.5726, lng: 88.3639. как мне это сделать ? пока это то, что я сделал. когда я передаю координаты, это не показывает место. Что я сделал не так? А также я хочу знать, как я могу показать координаты по умолчанию, когда пользователь очищает ввод? когда я console.log this.props.latitude я получаю следующую ошибку TypeError: Cannot read property 'latitude' of undefined. Я думаю, что мои данные не передаются должным образом на мой компонент карты! Если кто-нибудь знает, как это исправить, скажите!

это моя файловая структура.

MainFolder
 |
 |__ navigation.js
 |
 |__ right folder
 |     |
 |     |__form.js(this is where i have two inputs)
 |     |
 |     |__ MapContainerFolder
 |           |
 |           |__MapContainer.js
 |
 |
 |__ left folder
       |
       |__left.js

В моем компоненте формы у меня ниже код

 <MapContainer
     longitude= {this.state.longitude}
     latitude = {this.state.latitude}
 />

в моей навигации. js У меня есть это

 <form/>
<left/>

это мой mapContainer. js

import React, { Component } from "react";
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {

  render() {
    const style = {
      width: '24%',
      height: '65%'
    }
    return (
      <Map 
      style={style} 
      google={this.props.google} 
      zoom={14}
      initialCenter={{
        lat: 22.5726,
        lng: 88.3639
      }}
      center={{
        lat:this.props.longitude,
        lng:this.props.latitude
      }}
      >

        <Marker onClick={this.onMarkerClick}
                name={'Current location'} />

        <InfoWindow onClose={this.onInfoWindowClose}>
            <div>

            </div>
        </InfoWindow>
      </Map>

    );
  }
}

export default GoogleApiWrapper({
  apiKey: ("my api key")
})(MapContainer)

Answer 1

В вашем классе MapcContainer вам нужно определить состояние initail на основе реквизитов, которые вы передаете этому компоненту извне, и установить для них значение по умолчанию. Поскольку у меня нет ключа API Google, я собираюсь продемонстрировать ваш пример в Leaflet , но я уверен, что вы поймете эту идею.

const { Map: LeafletMap, TileLayer, Marker, Popup } = window.ReactLeaflet

class App extends React.Component {
  constructor(props) {
    super(props);

    const lat = this.props.latitude || 51.505;
    const lng = this.props.longitude || -0.091;

    this.state = {
      center: [lat,lng],
      zoom: 13
    };
  }

  render() {
    return (
      <div>
        <LeafletMap center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>Hello World!
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");

const Wrapper = () => <App latitude={51.505} longitude={-0.091} />;
ReactDOM.render(<Wrapper />, rootElement);