父组件
import Son from './son';
import { useRef } from 'react';
export default () => {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
childRef.current.changeVal(99);
};
return (
<div>
fuqin
<Son ref={childRef} />
<button onClick={updateChildState}>触发子组件方法</button>
</div>
);
};
子组件
import { useState, useImperativeHandle, forwardRef } from 'react';
export default forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法
changeVal: (newVal) => {
console.log(123, newVal);
},
}));
return <div>son</div>;
});