编码实战

import React, { Component } from 'react';export default class Parent extends Component {render() {return (<div><h1>我是父组件</h1><Child getChildComponent={this.getChildComponent} /><button onClick={this.click} >click</button></div>)}/*** @function 获取子组件的实例* @description 获取子组件的实例，把子组件的实例绑定在当前组件的child属性上* @param {object} childComponent 子组件的实例* @author 天心天地生 2020-1-10*/getChildComponent = (childComponent) => {this.child = childComponent; // 此处的child为组件的一个属性，名称不可更改}/*** @function 按钮点击事件* @description 通过当前组件的child属性可以调用子组件的所有方法和属性* @author 天心天地生 2020-1-10*/click = (e) => {this.child.myName();}}class Child extends Component {componentDidMount() {this.props.getChildComponent(this); //接受父组件传递的事件，并把当前组件作为参数传递}myName = () => alert('天心天地生');render() {return (<div><h3>我是子组件</h3></div>)}
}