如何在功能组件中将默认道具作为 function 传递

Question

I am using functional components in application. Below is my code.

 const Modal = forwardRef((props, ref) => {
  const { handleClose, children, ...rest } = props;

  const [open, setOpen] = useState(false);
  useImperativeHandle(ref, () => ({
    handleOpen() {
      setOpen(true);
    },

    handleClose() {
      setOpen(false);
    }
  }));

  const modalHandleClose = () => {
    ref.current.handleClose();
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      scroll="body"
      {...rest}
      disableBackdropClick
    >
      {children}
    </Dialog>
  );
});

In above component I want pass a default prop for handleClose as below

Modal.defaultProps = {
  handleCLose: modalHandleClose
};

but I am getting error that "modalHandleClose not defined". What can I try to resolve this?

Answer 1

React's defaultProps can't do that, since it's a static property of the component. It cannot access anything that only will exist once the component renders.

I would instead recommend using default values when destructuring the props:

const Modal = forwardRef((props, ref) => {
  const modalHandleClose = () => {
    ref.current.handleClose();
  };

  const { 
    handleClose = modalHandleClose, // <----- default value 
    children, 
    ...rest 
  } = props;