react 父组件调用子组件

1、类（class）型组件

// 子组件
export default class Child extends React.Component{
        
        componentDidMount(){
            this.props.onRef(this);     // 暴露给父组件 供父组件获取数据
        }
        
        getName = () =>{
            return "我是子组件啊"
        }

        render(){
            return(
我是子组件
)
        }


}

// 父组件
export default class Parent extends React.Component{
        
       
        // 父组件获取子组件的钩子
        childRef =  ref =>{
            this.Child = ref;
        } 

        callChild = () =>{
            const childName = this.Child.getName();
            console.log(childName);
        }

        render(){
            return(
                

                    我是父组件，接下来调用子组件
                    
                    this.callChild()}>点我获取子组件的名称
                
)
        }


}

2、方法型组件

// 子组件 
import {forwardRef } from "react";
const Child = (props, ref) => {

  const [initData, setInitData] = useState([1,2,3]);

  //  通过 useImperativeHandle 将 子组件 方法暴露给父组件
  useImperativeHandle(ref, () => ({
    // changeVal 就是暴露给父组件的方法
    GetInitData: () => {    // GetInitData 就是暴露给父组件的具体方法（名称自定义）
      getInitData()         // 子组件真实的方法
    },
  }));

    
   const getInitData = () =>{
        return [...initData];
   } 
   return (
        
我是子组件
    )
}

export default forwardRef(Child);



// 父组件
export default class Parent extends React.Component{
        
    
        // 父组件获取子组件的钩子
        childRef = React.createRef()

        callChild = () =>{
            const childName = this.childRef.current.GetInitData();
            console.log(childName);
        }

        render(){
            return(
                

                    我是父组件，接下来调用子组件
                    
                    this.callChild()}>点我获取子组件的名称
                
)
        }


}