React hook父调用子组件方法

注意几个关键字useRef，useImperativeHandle，.current，forwardRef

父组件

const dataobj = { pdata1: 1, pdate2:2 } const [dataobj ,setDataobj ] = useState({}); const pchildref = useRef(); function parantHandler() { // 子组件调用的父组件方法 } function parentDivClick() { // 父组件调用子组件方法 pchildref .current._childFn(); } return ( <div> <Child ref={pchildref} params1={dataobj.pdata1} params2={dataobj.pdata2} handlerClick={parantHandler}> </Child> <div onClick={parentDivClick}></div> </div> )

子组件

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

原文