0

我用google-maps-react建立了一个项目。

我有这个组件结构

<App />
--- <FilterLocations />
------ <LocationsList />
--- <GoogleMaps />
------ <Marker />

我单击 中的一个项目，<LocationList />我希望它使<GoogleMaps />组件中的相应标记反弹（<Marker />由包提供的组件表示）。

所以在<GoogleMaps />组件中我有这个片段：

{locations.map(location =>
   <Marker
      key={location.key}
      title={location.title}
      name={location.name}
      position={location.position}
      onClick={this.onMarkerClick}
      animation={(currentMarker === location.title)
         && this.props.google.maps.Animation.BOUNCE}
   />
)}

当我们单击 中的一个项目时，它处于更新currentMarker的状态，它是一个等于 的字符串。<App /><LocationsList />location.title

因此，当我使用 ReactDevTools 时，我看到动画道具在比较为真时正确设置为 1，但它仍然没有反弹。

任何想法？

这是GitHub 上的整个项目。

谢谢！

4

1 回答 1

0

似乎您决定删除该项目，以防您仍然对答案感到好奇或其他人可能需要它 - 在我的项目中，这是有效的：

我使用这里的纪录片中提供的功能设置我的项目。因此，在使用提供的 activeMarker 时，我设法通过在我的组件中添加这一行来让我的标记在点击时反弹：

 {filterLocations.map((item) => {
    return (    
    <Marker
      animation={activeMarker ? (item.name === activeMarker.title ? '1' : '0') : '0'} 
    />
 )
})}

是的，就是这样，不需要额外的功能。（假设您已经让标记响应列表项上的 .click() 。）

于 2018-08-10T23:19:50.630 回答