react hook 父子组件通信

父组件

import Child from 'component/Child'

 const dataobj = {
     pdata1: 1,
     pdate2:2
}
 const [dataobj ,setDataobj ] = useState({});
 const pchildref = useRef();
 function parantHandler() {
    // 子组件调用的父组件方法
}
 function parentDivClick() {
    // 父组件调用子组件方法
    pchildref .current._childFn();
}
 return (
    
)

子组件

 const Child = (props,ref) => {   
    // 接收父组件的传值
     const { params1,params2,handlerClick} = props;
     const childRef = useRef();
    // 暴露的子组件方法,给父组件调用
    useImperativeHandle(ref,() => {
         return {
            _childFn() {
                // something….
            }
        }
    })
    // handlerClick子组件调用父组件方法
     return 
} // forwardRef 配合useRef 父组件调用子组件方法使用 export default forwardRef(Child);

umi3中connect和forwardRef

父组件调用自组件时,子组件需要forwardRef包裹,在子组件中:

const Child = (props) => {   
    // 接收父组件的传值
     const { params1,params2,handlerClick,refInstance} = props;
     const childRef = useRef();
    // 暴露的子组件方法,给父组件调用
    useImperativeHandle(refInstance,() => {
         return {
            _childFn() {
                // something….
            }
        }
    })
    // handlerClick子组件调用父组件方法
     return 
} const TFunction = connect(({ home }: any) => (home))(Child); export default forwardRef((props, ref) => );

你可能感兴趣的:(react.js前端)