React使用 useRef 让父组件调用子组件的方法

React 中子组件调用父组件方法，使用 props 传递过来就可以在子组件中使用。那么父组件如何调用子组件方法呢？

父组件

import React, { useRef } from 'react';

const ParentCom= () => {
    const cRef = useRef(null);
    
    const handleClick = () => {
        if(cRef.current){
            cRef.current.getData()
        }
    }

    return (
        <div>
            <button onClick={handleClick}>点我</button>
            <ChildCom ref={cRef} />
        </div>
    )
}

子组件

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

const ChildCom = forwardRef(({...props}, ref) => {

    useImperativeHandle(ref, () => ({
        getData
    }))
    
    const getData = () => {
        console.log('cCom data')
    }
    
    return (
        <div>子组件</div>
    )
})

❤️如果文章对你有帮助，就点个赞支持一下吧，Thanks♪(･ω･)ﾉ