Question

我正在使用React＆amp; amp;阿波罗。我有带有标记的Google地图。 google-maps-react软件包要求你使用google地图包装器包装你的地图，但我的每个标记都有一个InfoWindow，它可以有一个编辑/删除按钮。理想情况下，我还希望使用graphQL突变包装此类以删除其中一个标记位置。我对如何做到这一点很困惑。这是我的代码：

export class MapContainer extends Component {
  //.........

  render() {
    if(this.props.loading){
      return <p>Loading map..</p>
    }

    let editDeleteBtns;
      //somelogic {
        editDeleteBtns = (
          <div>
            <button onClick={//do the onclick thing}>Edit</button>
            <button onClick={//do the other onclick thing}>Delete</button>
          </div>
        )
      }
    }

    return (
      <Map
        google={this.props.google}
        zoom={14}
        onClick={this.onMapClicked}
        onReady={this.fetchPlaces}
        initialCenter={{lat:this.props.lat, lng:this.props.lng}}
        >
          {
            this.props.locations.map((location) => {
              return (<Marker key={location.googleId}
                location_id={location.id}
                title={location.title}
                name={location.title}
                createdBy={location.createdBy.id}
                position={{lat: location.loc.lat, lng: location.loc.lng}}
                onClick={this.onMarkerClick} />)
            })
          }

        <InfoWindow onClose={this.onInfoWindowClose}
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}>
            <div>
              {
                editDeleteBtns
              }
              <h1>{this.state.activeMarker ? this.state.activeMarker.title: ''}</h1>
            </div>
        </InfoWindow>
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey:'the thing you use to make google maps google'
})(MapContainer)

这也是我第一次使用react做一个完整的网站，所以看起来我正在以无反应的方式做一些事情，我喜欢任何有关如何改进我所做的事情的人的意见做（例如，我应该将编辑/删除按钮作为一个单独的组件，并使用我的graphql变异包装那个新的组件类吗？或者这对于地图类太过臃肿，并且关注点的分离是不正确的已解决）

Apollo GraphQL＆amp;谷歌地图

0 个答案: