Question

我正在研究Reactjs项目，我想打开一个对话框，该对话框是购物车页面中的全局组件。当我单击购物车删除按钮时，这是购物车页面，它显示对话框当前为空。

/**
 * Cart Page
 */
import React, { Fragment } from 'react';
import { Button,Box} from '@material-ui/core';
import { ConfirmationDialog } from 'components/GlobalComponents';
import IntlMessages from 'util/IntlMessages';

function Cart(props){
    const [anchorEl,setAnchorEl] = React.useState(null);
    const [item,setItem] = React.useState('');
    const dialog = React.useRef(null);

    const onDeleteCartItem = (item) => {
        // setItem(item);
        console.log(dialog);
        // dialog.current.open();
    }

    const deleteCartItem = (popupResponse) => {
        console.log(popupResponse);
   }
   
    return (
        <div className="cart-page white-btn-color">
            <Button
                className="cart-delete"
                onClick={() => onDeleteCartItem(cart)}
            >
                <Box component="span" className="material-icons-outlined">delete</Box>
            </Button>                       
            <ConfirmationDialog
                ref={dialog}
                onConfirm={(res) => deleteCartItem(res)}
            />                          
        </div>
    )
}

export default Cart;

确认对话框：

import React from 'react';
import { Dialog, DialogContent, DialogActions, Button, Box, Typography } from '@material-ui/core';

function ConfirmationDialog(props) {
   const [open,setOpen] = React.useState(false);
   


   //Define function for open confirmation dialog box
   const openDialog = () => {
      setOpen(true);
   };

   //Define function for close confirmation dialog box and callback for delete item 
   const closeDialog = (isTrue) => {
      setOpen(false);
      props.onConfirm(isTrue)
   };
   console.log(props);
   return (
      <Dialog
         open={open}
         ref={props.ref}
         onClose={()=>closeDialog()}
         aria-labelledby="responsive-dialog-title"
      >
         <DialogContent>
                <Box textAlign="center" pt={2}>
                    <Typography variant="h5">
                        Are you sure you want to delete this product ?
                    </Typography>
                </Box>
         </DialogContent>
      </Dialog >
   );
}

export { ConfirmationDialog };

我正在尝试上述代码，但无法正常工作，请告诉我哪里错了。谢谢

Answer 1

有些错误。首先，ref道具具有特殊含义，除非您使用React.forwardRef()，否则不会传递给组件。

然后，根据docs，您不应使用ref作为公开API的方式。

我的首选方法是在组件树中定义对话框，并通过上下文公开打开/关闭功能。您可以使用useContext()来使用这些方法，甚至可以创建自己的useDialog()来内部使用本地上下文对象内部调用useContext()（在声明对话框的文件中），因此您不必导出上下文对象。

javascript-如何在React功能组件中将ref const从父组件传递给子组件？

1 个答案: