单击列表项时动画标记- google-maps-react

Question

我已经和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上的整个项目。

谢谢!

Answer 1

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

我使用纪录片here中提供的函数设置了我的项目。因此，在使用提供的activeMarker时，我设法通过在组件中添加以下行来在单击时获得标记反弹：

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

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