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

子组件

import {useState, useImperativeHandle,forwardRef} from 'react';
// props子组件中需要接受ref
let ChildComp = (props,ref) => {
    // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
    useImperativeHandle(ref, () => ({
        // changeVal 就是暴露给父组件的方法
        changeVal: (newVal) => {
           
        }
    }));
    return (
        
{val}
) } ChildComp = forwardRef(ChildComp)

父组件

import {useRef} from 'react';
const FComp = () => {
    const childRef = useRef();
    const updateChildState = () => {
        // changeVal就是子组件暴露给父组件的方法,99为给子组件传递的参数
        childRef.current.changeVal(99);
    }
    return (
        <>
            
            
        
    )
}

你可能感兴趣的:(React Hooks中父组件中调用子组件方法)