forwardRef和useImperativeHandle暴露子组件给父组件react

 

// 子组件
import React, {forwardRef,useImperativeHandle} from 'react';

const FunctionComponent = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        click: handleClick,
        ref: ref.current,
    }));
    const handleClick =() => {
        console.log('hulala')
    };
    return (
        <div onClick={handleClick} ref={ref} style={{width: '100px'}}>
            hulala
        </div>
    );
});

export default FunctionComponent;

// 父组件
const App = () => {
    const Dd = useRef();
    useEffect(() => {
        console.log(Dd, 'Dd');
    }, []);
    return (
        <FunctionComponent ref={Dd}/>
    )
};