ReactHook⽗⼦组件相互调⽤⽅法1.⼦组件调⽤⽗组件函数⽅法
//⽗组件
let Father=()=>{
let getInfo=()=>{
}
return ()=>{
react组件之间通信
<div>
<Children
getInfo={getInfo}
/>
</div>
}
}
//⼦组件
let Children=(param)=>{
return ()=>{
<div>
<span onClick={Info}>调⽤⽗组件函数</span>
</div>
}
}
⼦组件调⽤⽗组件函数，可以向⽗组件传参，刷新⽗组件信息
2.⽗组件条⽤⼦组件函数⽅法
//⽗组件
//需要引⼊useRef
import {useRef} from 'react'
let Father=()=>{
const childRef=useRef();
let onClick=()=>{
Info();
}
return ()=>{
<div>
<Children
ref={childRef}
/>
<span onClick={onClick}>调⽤⼦组件函数</span>
</div>
}
}
//⼦组件
//需要引⼊useImperativeHandle,forwardRef
import {useImperativeHandle,forwardRef} from 'react'
let Children=(ref)=>{
useImperativeHandle(ref, () => ({
getInfo:()=>{
//需要处理的数据
}
}))
return ()=>{
<div></div>
}
}
Children = forwardRef(Children);
useImperativeHandle 需要配合着 forwardRef 使⽤，要不就会出现以下警告
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。