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

使用到的hooks-- useImperativeHandle，useRef

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/* child子组件 */ // https://reactjs.org/docs/hooks-reference.html#useimperativehandle import {useState, useImperativeHandle} from 'react'; ... // props子组件中需要接受ref const ChildComp = ({cRef}) => {     const [val, setVal] = useState();     // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用     useImperativeHandle(cRef, () => ({         // changeVal 就是暴露给父组件的方法         changeVal: (newVal) => {           setVal(newVal);         }     }));     ...     return (         <div>{val}</div>     ) }

　　

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

/* FComp 父组件 */ import {useRef} from 'react; ... const FComp = () => {     const childRef = useRef();     const updateChildState = () => {         // changeVal就是子组件暴露给父组件的方法         childRef.current.changeVal(99);     }     ...     return (         <>             {/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}             <ChildComp  cRef={childRef} />             <button onClick={updateChildState}>触发子组件方法</button>         </>     ) }

　　

方法二、参考react官方文档：

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

　　

 注意：

useRef 仅能用在 FunctionComponent，createRef 仅能用在 ClassComponent。