React Hooks中父组件中调用子组件方法

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

// props子组件中需要接受ref

let ChildComp = (props,ref) => {

    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用

    useImperativeHandle(ref, () => ({

        // changeVal 就是暴露给父组件的方法

        changeVal: (newVal) => {

           

        }

    }));

    return (

        <div>{val}</div>

    )

}

ChildComp = forwardRef(ChildComp)

 

 

/* FComp 父组件 */

import {useRef} from 'react';

const FComp = () => {

    const childRef = useRef();

    const updateChildState = () => {

        // changeVal就是子组件暴露给父组件的方法

        childRef.current.changeVal(99);

    }

    return (

        <>

            <ChildComp ref={childRef} />

            <button onClick={updateChildState}>触发子组件方法</button>

        </>

    )