如何解决如何从父反应钩子调用子函数
在我的父组件中我有一个对话框,在对话框的内容中我加载了子组件
这是父组件中的Dialog
<Dialog
open={open}
onClose={handleClose}
>
<DialogContent>
<DialogContentText >
<Child id={id} status={status}/>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} />
<Button onClick={handleAcceptClose} />
</DialogActions>
</Dialog>
在我的子组件中,我有 sayhi
方法
const sayhi = () => {
alert("sialaaaaaam");
}
如何使用 sayhi
调用 ref
,我想使用 ref
,因为我想要最小渲染
解决方法
您需要将 ref 转发给子组件,并使用 useImperativeHandle 钩子。
示例 Child
组件:
const Child = React.forwardRef(
(props,ref) => {
const innerRef = React.useRef();
const sayhi = () => alert("sialaaaaaam");
useImperativeHandle(ref,() => ({
sayhi,}));
return (
{/* Child JSX */}
);
}
);
然后在父组件中创建并附加一个引用到 Child
:
const childRef = React.useRef();
...
<Child ref={childRef} id={id} status={status}/>
并调用 sayhi
函数:
childRef.current.sayhi();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。