HOOK父组件调用子组件的方法

1.父组件

import React,{useRef,useCallback} from 'react';
import Son from './son';

export default () => {
  const sonRef=useRef();

  const fatherAdd=useCallback(()=>{
    sonRef.current?.add()
  },[])

  return (
    <div className="test_menu">
    <button onClick={fatherAdd}>父级触发子组件的自增</button>
    &nbsp;
     <Son ref={sonRef}/>
    </div>
  );
};

2.子组件

import React ,{useState,forwardRef,useImperativeHandle}from 'react';

 const Son=({},ref:any)=>{

    const [count,setCount]=useState(0);

    const add=()=>{
        let newCont=count;
        setCount(++newCont)
    }

    const subtract=()=>{
        let newCont=count;
        setCount(--newCont)
    }
    
    // 可以自定义可用的方法等
    useImperativeHandle(ref, () => ({
        add: add,
        subtract:subtract
    }));

    return <>
    <button onClick={add}>子组件的自增</button>
    &nbsp;
    <button onClick={subtract}>子组件的自减</button>
    <br/>
    <div>值为：{count}</div>
    </>
}

export default forwardRef(Son)

3.效果图

4.总结

@1：forwardRef要和useImperativeHandle配合使用