Question

点击页面文件中的标题后，我试图更改Google Maps API组件中的位置。无法弄清楚如何通过其他文件访问组件。

尝试了不同的语法“ MapContainer.func”，“ MapContainer.props.func”。

ContactPage。

import GoogleMaps from '../../../components/GoogleMaps';
import MapContainer from '../../../components/GoogleMaps';

const breadcumbMenu = [
    { name: 'Home', route: '/' },
    { name: 'Contact', },
]

function bkLocation() {
    console.log('The bk link was clicked.');

    }

function mhLocation() {
    console.log('The mh link was clicked.');
    //MapContainer.changeLoc(40.712637, -74.008116); <-- need to use changeLoc right here
    }

function njLocation() {
    console.log('The nj link was clicked.');
    }


const ContactPage = () => {
    return (.......

GoogleMaps。

import React, { Component } from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';
import './style.scss'


const style = {
    width: '70%',
    height: '100%',
    left: '14%'
  }



export class MapContainer extends Component {

  static defaultProps = {
    center: {lat:40.585384,
      lng:-73.951200  },
    zoom: 11
};

  state = {
    center: {
        lat: 40.7831,
        lng: -73.9712
    }
  }


  _changeLoc = (lt, ln) => {
    this.setState({
        center: {
            lat: lt,
            lng: ln
        }
    });};


  render() {
      return (
        <Map 
        google={this.props.google} 
        style={style} 
        zoom={14}
        initialCenter={{
          lat:40.585384,
          lng:-73.951200  
        }}
        center={this.props.center}
        >


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

          <InfoWindow onClose={this.onInfoWindowClose}>

          </InfoWindow>
        </Map>
      );
      }


}

export default GoogleApiWrapper({
  apiKey: ("AIzaSyBfumfF_4j5uvjaITGn_VO_pb3O59uu-oE")
})(MapContainer)

我得到的错误是“ changeLoc不是函数/未定义”。当用户单击标题（控制台日志中有3个标题）时，我需要更改地图API的位置。我需要以某种方式连接changeLoc函数，并使其可以从ContactPage文件中调用。预先谢谢你！

Answer 1

您可以通过以下方式实现

将_changeLoc设为静态，然后您就可以按照定义调用MapContainer._changeLoc

static _changeLoc = (lt, ln) => {
    this.setState({
        center: {
            lat: lt,
            lng: ln
        }
    });};

选项2是使用redux并将函数的引用添加到redux存储中

在另一个组件中访问道具

1 个答案: