React componentDidMount() 影响渲染

Question

我从 App 组件状态设置面板组件的属性。当我单击按钮时，我想增加（示例）地图 coordinates.It 没问题，但我必须在面板的 componentDidMount() 中声明 openlayers 变量，但 componentDidMount 一次运行所以坐标不会改变映射我能做什么？请帮忙....

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Panel from './Map'


class App extends Component {
  constructor() {
    super();
    this.state = {
      coordinates: [46.41, 40.82]
    }
  }
  render() {

    return (
      <div >
        <Panel coordinates={this.state.coordinates} />
        <div><button onClick={() => {
          this.setState({
            coordinates: [this.state.coordinates[0] + 1, this.state.coordinates[1]]
          })
        }}>Go</button></div>
      </div>
    );
  }
}

export default App;

面板组件

import React from 'react'
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import proj from 'ol/proj/';
import { fromLonLat } from 'ol/proj';

export default class Panel extends React.Component {

    constructor() {
        super();
        this.state = {
            crd: [46, 40]
        }
    }
    GetCoordinates() {
        return this.state.crd
    }

    componentWillReceiveProps(prp) {
        this.setState({ crd: prp.coordinates })
    }
    componentDidMount() {
        const map = new Map({
            target: 'map',
            layers: [
                new TileLayer({
                    source: new OSM()
                })
            ],
            view: new View({
                center: fromLonLat(this.GetCoordinates()) // i need set here,
                zoom: 7
            })
        });
    }
    render() {
        return <div id="map" style={{ width: '700px', height: '500px' }}></div>
    }
}

Answer 1

打开层有命令式API，这意味着您必须调用地图对象上的方法来更新它。

因此，在 componentDidMount:

中实例化地图时，首先需要保留对地图的引用

componentDidMount() {
    this.map = new Map({
        target: 'map',
        layers: [
            new TileLayer({
                source: new OSM()
            })
        ],
        view: new View({
            center: fromLonLat(this.GetCoordinates()) // i need set here,
            zoom: 7
        })
    });
}

然后在 componentWillReceiveProps 你必须 "command" 地图在你的状态改变后更新它的中心：

componentWillReceiveProps(prp) {
    this.setState({ crd: prp.coordinates }, function() {
        this.map.getView().setCenter(ol.proj.fromLonLat(this.GetCoordinates()));
    });
}

请注意，此处您的组件不需要将坐标保持在其状态。您可以使用普通实例变量来存储坐标并避免由 setState:

引起的不必要的渲染

....
constructor() {
    super();
    this.crd = [46, 40];
}
GetCoordinates() {
    return this.crd
}
componentWillReceiveProps(prp) {
    this.crd = prp.coordinates;
    this.map.getView().setCenter(
        ol.proj.fromLonLat(this.GetCoordinates())
    );
}
....

React componentDidMount() 影响渲染

React componentDidMount() influence render

reactjs

lifecycle

openlayers-5