当尝试使用 @react-google-maps 从数组中聚类标记时， this.props.children 不是一个函数

Question

我正在尝试获取具有纬度/经度点的对象数组，并Marker为每个对象创建一个，然后将这些Marker对象传递到<MarkerClusterer>组件中。

通过直接复制这里的文档，我可以让它工作。然而，他们的方法与我需要的有点不同。

差异似乎在于点如何映射到组件。

工作代码：

<MarkerClusterer
      options={{imagePath:"https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"}}
    >
      {
        (clusterer) => [
          {lat: -31.563910, lng: 147.154312},
          {lat: -33.718234, lng: 150.363181},
          {lat: -33.727111, lng: 150.371124},
          {lat: -33.848588, lng: 151.209834}
        ].map((location, i) => (
          <Marker
            key={i}
            position={location}
            clusterer={clusterer}
          />
        ))
      }
    </MarkerClusterer>

我的非工作代码：

const listings = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
  ];
  let testArray = [];
  for (let i = 0; i < listings.length; i++) {
    let location = listings[i];
    testArray.push(
      <Pin position={location} id={i} key={i} clusterer={listings} />
    );
  }
...

 <MarkerClusterer>
    {testArray}
 </MarkerClusterer>

这是一个带有示例的代码沙盒。代码在Map2.js下，区别在第61行。

我无法弄清楚第一种方法在做什么，而我没有这样做。也许集群参考？在该领域的任何帮助将不胜感激。

Answer 1

该<MarkerClusterer>组件需要一个函数作为其子属性。该函数将由组件的渲染函数调用<MarkerClusterer>。在第二种情况下，您将传递一个数组作为子属性。因此，MarkerClusterer尝试将数组作为函数 ( testArray()) 调用，因此失败。

这应该有效

<MarkerClusterer
  options={{
    imagePath:
      "https://developers.google.com..."
  }}
>
  {clusterer =>
    listings.map((location, i) => (
      <Pin key={i} position={location} clusterer={clusterer} />
    ))
  }
</MarkerClusterer>

这在 React 世界中被称为渲染道具。阅读此处了解更多详细信息。