1. 16.3版本之前,是通过父组件给子组件传个ref属性 ,然后在父组件调用this.refs.xxx来获取子组件的dom，从而调用他的方法 ```jsx var Child = React.createClass({ childMethod: function(){
      1.  alert("组件之间通信成功");
      }, render: function() {
      1.  return( 
      2.    <div> 
      3.      <h1>Hello {this.props.name}</h1>  
      4.      <button onClick={this.childMethod}>子组件</button>
      5.    </div>
      6.   )
      } });

    // 父组件 var Parent = React.createClass({ getDS: function(){ // 调用组件进行通信 this.refs.getSwordButton.childMethod(); }, render: function(){ return (

    ); } });

    2. 2. 16.3版本之后，父组件通过给子组件传递一个方法,子组件componentDidMount中,调用该方法并把this传过去,也就是把子组件自己传过去，从而父组件就获得子组件的dom
    3. ```jsx
    4. import React, {Component} from 'react';
    6. export default class Parent extends Component {
    7.     render() {
    8.         return(
    9.             <div>
    10.                 <Child onRef={this.onRef} />
    11.                 <button onClick={this.click} >click</button>
    12.             </div>
    13.         )
    14.     }
    16.     onRef = (ref) => {
    17.         this.child = ref
    18.     }
    20.     click = (e) => {
    21.         this.child.myName()
    22.     }
    24. }
    26. class Child extends Component {
    27.     componentDidMount(){
    28.         this.props.onRef(this)
    29.     }
    31.     myName = () => alert('xiaohesong')
    33.     render() {
    34.         return ('woqu')
    35.     }
    36. }
    1. 类组件中，通过React.createRef()创建一个ref对象，并通过ref属性将该对象绑定给子组件，该对象下的current属性就指向了子组件 ```jsx import React, {Component} from ‘react’;

    export default class Parent extends Component { constructor(props){ super(props); this.ref = React.createRef(); } click = (e) => { this.ref.current.myName() } render() { return(

    ) }

    }

    class Child extends Component { myName = () => alert(‘xiaohesong’)

    1. render() {
    2.     return ('woqu')
    3. }

    }

    2. 4. react hooks中，父组件通过useRef()创建一个ref对象并将他通过props属性方式传递给子组件，因为ref是不能挂在到函数组件上的，因为函数组件没有实例，所以子组件需要通过useImperativeHandle将子组件的函数挂载到父组件的ref.current
    3. ```jsx
    4. import {useRef, useState, useImperativeHandle} from 'react;
    6. const Child = ({ref}) => {
    7.     const [val, setVal] = useState();
    8.     // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    9.     useImperativeHandle(ref, () => ({
    10.         // changeVal 就是暴露给父组件的方法
    11.         changeVal: (newVal) => {
    12.           setVal(newVal);
    13.         }
    14.       }));
    15.       return (
    16.         <div>{val}</div>
    17.     )
    18. }
    19. Child = forwardRef(Child);
    21. const Parent = () => {
    22.     const ref = useRef();
    23.     const updateChildState = () => {
    24.         // changeVal就是子组件暴露给父组件的方法
    25.         ref.current.changeVal(99);
    26.     }
    27.     ...
    28.     return (
    29.         <>
    30.             {/* 此处注意需要将childRef通过props属性从父组件中传给自己 ref={childRef} */}
    31.             <ChildComp  ref={ref} />
    32.             <button onClick={updateChildState}>触发子组件方法</button>
    33.         </>
    34.     )
    35. }