在google-maps-react的单独组件中使用标记

Question

我的目标是能够使用一个单独的组件“标记”，它包含地图的所有标记。我计划使用一个纯组件来增强性能。在这样做的时候，我遇到了一些关于标记渲染的问题。

这个问题可以归结为下面的例子。当使用customMarker = true时，标记不显示

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

const MyOwnMarker = (props) => <Marker position={{lat:40, lng:-88}}/>

export class MapContainer extends React.Component {
  
  render = () => {
    const customMarker = true
    return (
      <Map
          google={this.props.google}
          initialCenter={{lat: 40,lng: -88}}
          zoom={15}
        >
          { customMarker ? 
            <MyOwnMarker /> : 
            <Marker position={{lat:40, lng:-88}}/>
          }
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (process.env.REACT_APP_GOOGLE_API_KEY)
})(MapContainer)

期望的结果是，当customMarker = true时，它应该产生与customMarker = false时相同的结果，因为道具是相同的。现在，标记在customMarker = true时不可见。

Answer 1

似乎当你问这个问题的时候--你的大脑会说“实际上，这就是它是如何工作的”。下面是我如何解决这个问题的。这可能会对任何看到这篇文章的人有所帮助。

在google-map-react文档中，他们还传递了道具"map“和"google”。这些都没有被计算在内。因此，添加所有未定义的道具可以让额外的组件工作。

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

const MyOwnMarker = (props) => React.createElement(Marker,{
  position:{lat:40, lng:-88}, 
  ...props
})

export class MapContainer extends React.Component {
  
  render = () => {
    const customMarker = true
    return (
      <Map
          google={this.props.google}
          initialCenter={{lat: 40,lng: -88}}
          zoom={15}
        >
          { customMarker ? 
            <MyOwnMarker /> : 
            <Marker position={{lat:40, lng:-88}}/>
          }
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (process.env.REACT_APP_GOOGLE_API_KEY)
})(MapContainer)