react hook 父组件调用子组件方法

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值

import { useState, useImperativeHandle } from 'react';
// props子组件中需要接受ref
export default function ChildComp({ cRef }) {
    const [val, setVal] = useState();
    function rules(a) {
        console.log(a);
    }
    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(cRef, () => ({
        // changeVal 就是暴露给父组件的方法
        changeVal: (newVal) => {
            rules(newVal);
        }
    }));
    return (
        <div>{val}</div>
    )
}

import {useRef} from 'react'
import ChildComp from './ChildComp'
export default function App() {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子组件暴露给父组件的方法
        childRef.current.changeVal(99);
    }
    return (
        <>
            {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
            <ChildComp  cRef={childRef} />
            <button onClick={updateChildState}>触发子组件方法</button>
        </>
    )
}