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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/* FComp 父组件 */ import {useRef} from 'react'; const FComp = () => {     const childRef = useRef();     const updateChildState = () => {         // changeVal就是子组件暴露给父组件的方法         childRef.current.changeVal(99);     }     return (         <>             <ChildComp ref={childRef} />             <button onClick={updateChildState}>触发子组件方法</button>         </>     )