一.父组件获取子组件的数据
子组件代码:
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj.js';
import {defaults as defaultControls, ZoomToExtent} from 'ol/control.js';
class MapComponent extends Component {
constructor(props) {
super(props);
this.state = {
map:{}
}
}
// 2.dom渲染成功后进行map对象的创建
componentDidMount() {
let { center } = this.props;
if (!center) {
center = {
lon: 113.8,
lat: 34.6,
};
}
this.map = new Map({
controls: defaultControls().extend([
new ZoomToExtent({
extent: [
813079.7791264898, 5929220.284081122,
848966.9639063801, 5936863.986909639
]
})
]),
view: new View({
center: fromLonLat([center.lon, center.lat]),
zoom: 5,
}),
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
});
// 传值给父组件
if(this.props.getMap){
this.props.getMap("map对象")
}
}
render() {
// 1.创建地图容器
return (
<div style={{ height: '100%' }}>
<div id="map" className="map" style={{ height: '100%' }} />
</div>
);
}
}
export default MapComponent;
(1)函数传值的方式
父组件代码:
import React, { Component } from 'react';
import Map from '../../component/map/map';
// import {defaults as defaultControls, ZoomToExtent} from 'ol/control.js';
class NavControl extends Component {
componentDidMount() {}
getMap = (map) => {
console.log("子组件的传递过的数据",map)
};
render() {
return (
<div>
<Map ref="map" center={{ lon: 113.8, lat: 34.6 }} getMap={this.getMap} />;
</div>
);
}
}
export default NavControl;
说明:
(1)在父组件中首先定义一个接受子组件参数的函数
(2)在子组件中调用父组件接受参数的函数
二:通过对象来获取数据
父组件的代码:
import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Button } from 'antd';
import { fromLonLat } from 'ol/proj.js';
class MapOperation extends Component {
constructor(props) {
super(props);
this.state = {
map: null,
view: null,
};
}
componentDidMount() {
let { map } = this.refs.map;
// map.addNavControl()
let layrs = map.getOverlays();
console.log('图层信息', layrs);
// 缩小
var view = map.getView();
console.log('地图', view);
// var zoom = view.getZoom();
this.setState({
map,
view,
});
}
render() {
return (
<div>
<Map ref="map" center={{ lon: 113.8, lat: 34.6 }} />;
</div>
);
}
}
export default MapOperation;
说明:父组件中通过this.refs获得子组件的所有数据,这个前提是自定义的数据在子组件的通过this.xxxx = new Map();
(1)子组件的数据的定义
(2)父组件的使用子组件的数据
这样就可以实现父组件获取子组件的数据了。
总结:父组件传值一种是通过函数的方式传值进行父子组件的传值,另一种是通过对象来传值,其中主要是子组件获取数据或者调用父组件的函数是通过props 来获取父组件的数据,父组件是通过ref和refs来获取子组件的数据或者子组件方法的调用