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> </> )