关于React函数式组件父组件通过ref调用子组件的方法

最新推荐文章于 2024-07-05 12:39:32 发布

原创最新推荐文章于 2024-07-05 12:39:32 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React+antd+antd pro 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在React中使用useImperativeHandle和forwardRef进行父子组件间的通信，展示了如何在父组件中引用并调用子组件的方法。

使用useImperativeHandle+forwardRef，后者可以不使用

父子组件代码：

import {useRef} from 'react'
import Child from "./child"
//父组件
const Parent=()=>{
const cRef=useRef()
return(

const getChild=()=>{
cRef.current.getdata()//调用子组件的getdata方法
}

<Chile cRef={cRef} />//子组件
<BUtton onClick={getChild}/>
)
}
export default Parent

//子组件
import {useImperativeHandle} from 'React'
type Cprops={
cRef
}
const Child=({cRef})=>{
useImperativeHandle(cRef,()=>({
//这里写上子组件的方法
getdata()
}))
}