react 父子组件的传值与方法的相互调用

一.父组件获取子组件的数据

  子组件代码：

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来获取子组件的数据或者子组件方法的调用