React 函数式组件之父组件调用子组件的方法
2022-07-22
Cikayo
前言
最近做一个 React
项目,遇到一个问题:在使用 React.js
的函数式组件时,如何在父组件中调用子组件的方法?
我们都知道,React
中子组件调用父组件方法,使用 props
传递过来,然后在子组件中就可以使用了。但是父组件如何调用子组件方法呢?请看下面代码:
涉及到
React.js
中的API
:useRef
,forwardRef
,useImperativeHandle
第一步 使用useRef
在父组件中,使用 useRef
创建一个 ref
import { useRef } from 'react';
import ChildCom from './ChildCom';
// 父组件中代码
const FCom = () => {
const cRef = useRef(null);
return (
<div>
<ChildCom ref={cRef} />
</div>
)
}
第二步 使用forwardRef和useImperativeHandle
子组件中代码:(使用了 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>
)
})
export default ChildCom;
第三步 子组件方法调用
此时,在父组件中就可以随心所欲的调用子组件中的方法了!
import { useRef } from 'react';
import ChildCom from './ChildCom';
// 修改父组件中代码
const FCom = () => {
const cRef = useRef(null);
const handleClick = () => {
cRef.current && cRef.current.getData()
}
return (
<div>
<ChildCom ref={cRef} />
</div>
)
}
参考链接:
https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle