Question

我有一个地图组件，我想要渲染自定义标记。但是，我想创建一个连接组件，以便使用redux管理我的状态。我遇到的问题是标记不会根据地图更新其位置，并且与我移动地图时保持相同的位置。

这是地图渲染：

  render() {

    const {viewport, settings} = this.state;
    console.log("htiiss", this);
    return (
      <MapGL
        {...viewport}
        {...settings}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        onViewportChange={this._onViewportChange}
        mapboxApiAccessToken={MAPBOX_TOKEN} >
        { this.markers.map((marker,i )=>{
          const {name, coordinates} = marker;
          return (
            <MyMarker key={i} longitude={coordinates[0]} latitude={coordinates[1]} ></Bus>


          );
        }) }

      </MapGL>
    );
  }

class MyMarker extends React.Component {

  render() {
    const {
      latitude,
      longitude,
      currentTimestamp,
      eta
    } = this.props;
    console.log("asdasd", latitude, longitude);
    return (
      <Marker
        className={styles.bus}
        latitude={ latitude }
        longitude={ longitude }>
        <div ><span>aaaa</span></div>

      </Marker>
    );
  }
}



export default connect(
  s => ({}),
  d => ({})
)(MyMarker);

如何让MapGL组件告诉其子级更新其位置？

Answer 1

在此代码段中，

{ this.markers.map((marker,i )=>{
  const {name, coordinates} = marker;
  return (
    <MyMarker key={i} longitude={coordinates[0]} latitude={coordinates[1]} ></Bus>


  );
}) }

coordinates只是标记中的固定值。我猜this.markers是一个marker对象的数组？

无论如何，不要将经度和纬度道具的固定值传递给MyMarker，而是将markers移动到地图的状态。如果不可能，至少将坐标移动到Map的组件状态。

然后，传递状态中的坐标。它看起来像

{ this.state.markers.map(..

这样，只要MyMarker中的coordinates发生变化，this.state.markers就会发生变化。

如何根据父组件中的数据更改来更新子组件？

1 个答案: