前言:
最近做一个React项目,所有组件都使用了函数式组件,遇到一个父组件调用子组件方法的问题,让我好一阵头疼。
我们都知道,React 中子组件调用父组件方法,使用 props 传递过来就可以在子组件中使用。但是父组件如何调用子组件方法呢?请看下面代码:
第一步:
在父组件中,使用 useRef 创建一个 ref
import { useRef } from 'react'
// 父组件中代码
const FCom = () => {
const cRef = useRef(null);
return (
<div>
<ChildCom ref={cRef} />
</div>
)
}
第二步:
子组件中代码:(使用了 forwardRef,useImperativeHandle)
import { forwardRef, useImperativeHandle } from 'react'
const ChildCom = forwardRef(({
// 这里是一些props参数
}, ref) => {
useImperativeHandle(ref, () => ({
getData: getData,
otherFun: otherFun
}))
function getData() {
// to do something
}
function otherFun() {
console.log('这是其他方法')
}
return (
<div>子组件</div>
)
})
第三步:
此时,在父组件中就可以随心所欲的调用子组件中的方法了!
import { useRef } from 'react'
// 修改父组件中代码
const FCom = () => {
const cRef = useRef(null);
const handleClick = () => {
cRef.current && cRef.current.getData()
}
return (
<div>
<ChildCom ref={cRef} />
</div>
)
}
好了,如果你看完觉得有收获,帮我点个赞哦~ 谢谢~
下面是我的博客,欢迎来逛