时间戳

首页 > 解决方案 > 访问另一个组件中的 props

javascript - 访问另一个组件中的 props

问题描述

我试图通过单击页面文件中的标题来更改 Google Maps API 组件中的位置。无法弄清楚如何通过不同的文件访问组件。

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

联系页面。

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 (.......

谷歌地图。

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 不是函数/未定义”。当用户单击标题时，我需要更改地图 api 位置（控制台日志中有 3 个标题）。不知何故，我需要连接 changeLoc 函数并使其可从 ContactPage 文件调用。先感谢您！

标签： javascriptreactjscomponents

解决方案

您可以通过以下方式实现此目的

将 _changeLoc 设为静态，然后您将能够按照您的定义调用 MapContainer._changeLoc

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

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

推荐阅读