Я передаю чекпоинты в карту, которая не должна обновляться, поскольку тут canvas. Но при этом должно изменяться количество чекпоинтов. Если включу обновление карты при изменении количества чекпоинтов, то получу много ошибок связаных с повторным присваиванием элементов карте. А как тогда обновить только
this.props.children в карте, но не трогать остальное?
class MapController extends Component<MapControllerProps> {
shouldComponentUpdate() {
return false;
}
render() {
return (
<div id="map-container">
<Map
style="mapbox://styles/mapbox/streets-v8"
containerStyle={{
height: '100%',
width: '100%'
}}
center={[car3DModelLayer.coordinates.lat, car3DModelLayer.coordinates.lng]}
zoom={[17]}
pitch={[65]}
bearing={[20]}
onZoom={this.zoomControl}
onStyleLoad={this.props.onStyleLoad}
onMouseMove={this.props.onMouseMove}
>
<div>{this.props.children}</div>
<MapContext.Consumer>
{(map: any): any => {
this.props.onLoad ? this.props.onLoad(map) : null;
}}
</MapContext.Consumer>
<ScaleControl position="top-right"/>
<BuildingsLayer3DComponent />
</Map>
</div>
);
}
}
class MapComponent extends Component<{}, MapComponentState> {
state = {
checkedCoordinates: { lng: 0, lat: 0 },
waypoints: [{lat: 24.03862, lng: 49.83498}]
}
render() {
return(
<div>
<MapController waypoints={this.state.waypoints} onStyleLoad={this.handleMapStyleClick} onLoad={this.handleMapLoad} getCoords={this.getCoords}>
<Checkpoint textColor="#ffffff" icon="map-marker-icon" iconScale={0.15} points={this.state.waypoints} />
</MapController>
<RoutingForm handleClick={this.addWaypoint} lat={this.state.checkedCoordinates.lat} lng={this.state.checkedCoordinates.lng} />
</div>
);
}
}