如何从父反应钩子调用子函数

Question

在我的父组件中有一个对话框，在对话框的内容中我加载了子组件

这是父组件

中的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");
}

如何使用 ref 调用 sayhi，我想使用 ref 因为我想要最小渲染

Answer 1

您需要将 ref 转发给子组件，并使用 useImperativeHandle 挂钩。

示例 Child 组件：

const Child = React.forwardRef(
  (props, ref) => {
    const innerRef = React.useRef();

    const sayhi = () => alert("sialaaaaaam");

    useImperativeHandle(ref, () => ({
      sayhi,
    }));

    return (
      {/* Child JSX */}
    );   
  }
);

然后在父组件中创建并附加一个 ref 到 Child:

const childRef = React.useRef();

...

<Child ref={childRef} id={id} status={status}/>

并调用 sayhi 函数：

childRef.current.sayhi();

如何从父反应钩子调用子函数

How to call child function from Parent react hook

reactjs

react-ref

react-hooks