Question

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

我有这个组件结构

ValueError: Dimensions must be equal, but are 400 and 800 for 'add' (op: 'Add') with input shapes: [128,400,512], [128,800,1024].

我单击<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 />的字符串。

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

有什么想法吗？

这是GitHub上的整个项目。

谢谢！

Answer 1

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

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

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

是的，仅此而已，不需要其他功能。（假设您已经让标记响应列表项上的.click（）。）

单击列表项时的动画标记-Google Maps React

1 个答案: