Question

所以我还是React的新手，我有两个组件，一个创建地图，另一个列出在地图上的位置，我试图找到一种方法，以便当单击其中一个列表项时，InfoWindow地图弹出。

这是地图组件

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

var  AllPlaces = [
  {
    "name" : "Pizza",
    "lat": "40.7589",
    "lng":"-73.9851",
  },

  {
    "name" : "Cookies",
    "lat": "40.7690",
    "lng":"-73.9952",
  }
]

class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
};

onMarkerClick = (props, marker, e) =>
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  showingInfoWindow: true
 });

onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
  this.setState({
    showingInfoWindow: false,
    activeMarker: null
  })
}
};

render() {
return (
  <div className = 'map-container' style={{marginleft:'250px'}}>
    <Map google={this.props.google} zoom={14}
      initialCenter = {{lat:40.7589, lng:-73.9851}}
      onClick={this.onMapClicked}>
      <Marker
        onClick={this.onMarkerClick}
        title = {AllPlaces[0].name}
        name={AllPlaces[0].name}
        position = {{lat:AllPlaces[0].lat,lng:AllPlaces[0].lng}}/>
      <Marker
        onClick={this.onMarkerClick}
        title = {AllPlaces[1].name}
        name={AllPlaces[1].name}
        position = {{lat:AllPlaces[1].lat,lng:AllPlaces[1].lng}}/>
      <InfoWindow
        onOpen={this.windowHasOpened}
        onClose={this.windowHasClosed}
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <div>
          <h1>{this.state.selectedPlace.name}</h1>
        </div>
      </InfoWindow>
    </Map>
  </div>
);
}
}

export default GoogleApiWrapper({
apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})(MapContainer)

这是列表组件

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

var  AllPlaces = [
  {
    "name" : "Pizza",
    "lat": "40.7589",
    "lng":"-73.9851",
  },

  {
    "name" : "Cookies",
    "lat": "40.7690",
    "lng":"-73.9952",
  }
]

class ListPlaces extends Component {

CreateInputField = () => {
return <input
placeholder = "Search Nearby Places"
/>
}

findPlaces = () => {
return(
  <ol className='Places'>
    {AllPlaces.map((arrayItem, index)=>
      <li
      key = {index}
      className='Place'
      >{arrayItem.name}</li>
    )}
  </ol>
)
}

render() {
return(
  <div>
    <div className = 'sideMenu'>
      <div className = 'List'>
        <h1 className = 'title'> Places to Eat </h1>
        {this.CreateInputField()}
      </div>
      <div className = 'PlaceList'>
        {this.findPlaces()}
      </div>
    </div>
  </div>
)
}
}
export default ListPlaces
}

我不知道如何做到这一点，因此，当单击列表组件中的一项时，将显示正确的InfoWindow。

Answer 1

您可以在父组件中定义一个方法，以检索单击的项目信息并将其存储在其状态中。然后将状态值提供给其他组件。像这样：

// Parent.js

class Parent extends Component {
    state = {
        ...
        position: null;
    }

    ...

    setPosition = (position) => {
      this.setState({ position })
    }

    render () {
        return (
          <Fragment>
              <A position={this.state.position} />
              <B setPosition={this.setPosition} />
          </Fragment>
        )
    }
}

// B.js

class B extends Component {
  ...

  notifyParent = (item) => {
    this.props.setPosition(item)
  }

  render () {
    return (
      <ul>
          {items && items.map(item => (
            <li onClick={() => this.notifyParent(item)}>
                {item.key}
            </li>
          ))}
      </ul>
    )
  }
}

让两个反应组件通过“ google-maps-react”相互交谈

1 个答案: