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

Question

我的目标是能够使用包含 map 的所有标记的单独组件“标记”。 我计划使用纯组件来增强性能。 执行此操作时，我遇到了标记渲染的一些问题。

问题归结为下面的示例。 当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-maps-react 文档中，他们还传递了道具“地图”和“谷歌”。 这些都没有考虑。 因此，添加所有未定义的道具允许额外的组件工作。

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)