React类组件中如何通过点击Marker动态渲染google-maps-react的Polyline

实现思路 #

React 所有动态渲染逻辑都通过状态驱动，你不需要在点击事件中手动生成组件，只需要新增状态控制 Polyline 的显隐和对应数据源，点击 Marker 时修改状态即可。

具体修改步骤 #

1. 扩展组件state

新增两个状态字段，分别控制 Polyline 是否显示、存储当前需要渲染的航线坐标：

state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
    // 新增字段
    shouldShowPolylines: false,
    activePolylinePaths: []
};

2. 修改Marker点击回调

点击Marker时，把需要展示的航线数据存入状态，同时开启显示开关：

如果不同Marker对应不同航线，可在这一步根据Marker的属性筛选pathCoordinates中匹配的航线数据，以下示例默认点击任意Marker展示所有航线

onMarkerClick = (props, marker, e) =>
this.setState({
    selectedPlace: props,
    activeMarker: marker,
    showingInfoWindow: true,
    shouldShowPolylines: true,
    activePolylinePaths: pathCoordinates.coordinates
});

3. （可选）修改弹窗关闭回调

如果需要关闭InfoWindow时同步隐藏航线，在关闭逻辑里重置Polyline相关状态：

onClose = props => {
if (this.state.showingInfoWindow) {
    this.setState({
    showingInfoWindow: false,
    activeMarker: null,
    // 新增重置逻辑
    shouldShowPolylines: false,
    activePolylinePaths: []
    });
}
};

4. 修改render中的Polyline渲染逻辑

改成条件渲染，只有状态开启时才渲染对应Polyline，同时给列表项添加唯一key避免React警告：

{this.state.shouldShowPolylines && this.state.activePolylinePaths.map((item, index) => 
    <Polyline
        key={index} {/* 如有航线唯一ID替换为ID即可 */}
        path={item}
        geodesic={true}
        options={{
            strokeColor: "#ff2527",
            strokeOpacity: 0.3,
            strokeWeight: 1,
            icons: [
                {
                    icon: lineSymbol,
                    offset: "0",
                    repeat: "2px"
                }
            ]
        }}
    />
)}

内容的提问来源于stack exchange，提问作者Kaguei Nakueka