Javascript 如何将默认道具作为功能组件中的函数传递

我在应用程序中使用功能组件。下面是我的代码

 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>
  );
});

---

但我得到的错误是“modalHandleClose未定义”。我可以尝试如何解决此问题？

React的

defaultProps

无法解决此问题，因为它是组件的静态属性。它无法访问仅在组件呈现后才存在的任何内容

相反，我建议在分解道具时使用默认值：

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

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

const model=forwardRef（（道具，ref）=>{
const modalHandleClose=（）=>{
参考当前的handleClose（）；
};
常数{
handleClose=modalHandleClose，//我认为这是因为modalHandleClose没有在此处定义，请尝试使用
handleClose=（）=>{/*默认句柄关闭函数体*/}
我不明白为什么您要传递一个
handleClose
prop回调函数，并且想要使用React ref。您想要设置的默认prop值似乎是
对话框的值。@drewrese。这是我常用的组件。我在关闭某些组件时有不同的操作，因此，我是passing作为道具。在某些情况下，我会在关闭时执行默认操作。这就是我传递默认句柄close的原因。Nicholas下面的解决方案应该是您所需要的。顺便说一句，如果您提供回退值，您不需要标记需要的道具，事实上您提供的是回退类型，这就排除了需要的道具。@drewerese，如果我愿意的话l标记为所需，然后它将再次请求defaultProps。您的解决方案在功能上正常工作。但我得到了这样的信息：“prop
handleClose
在
Modal
中标记为所需，但其值为
undefined
”。当我制作道具时，需要进行验证。
const Modal = forwardRef((props, ref) => {
  const modalHandleClose = () => {
    ref.current.handleClose();
  };

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