【React】父组件调用子组件的方法

1 函数组件实现方式：

父组件：

import React from "react";
import Child from './Child'

const Parent = ()=>{

    const ChildRef = React.createRef();
    
    return (
        <div onClick={() => ChildRef.current.handleChild()}>
			<Child onRef={ChildRef}/>
        </div>
    )
}

子组件：

import React, { useImperativeHandle } from "react";

const Child = (props)=>{

	useImperativeHandle(props.onRef, () => {
    	return {
			handleChild: getList,
    	}
	})
    
    const getList = ()=>{ console.log('子组件方法') }
    
    return <div>子组件</div>
}

2 类组件实现方式：

父组件：

import React,{Component} from 'react';
import Child from './Child'

export default class Parent extends Component{
  componentDidMount () {
    this.child.test('父组件参数')
  }
  onRef = (ref)=> {
    this.child=ref//接收子组件this
  }
  render () {
    return (
      <div>
        <Child onRef={ this.onRef}/>
      </div>
    )
  }
};

子组件：

import React,{Component} from 'react';

export default class Child extends Component{
  componentDidMount () {
    this.props.onRef(this)//传递子组件this
  }
  test = (val)=> {
    console.log(val)
  }
  render () {
    return <div>子组件</div>
  }
};