如何在反应功能组件中将 ref const 从父组件传递到子组件?

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()，否则不会传递给组件。

然后，根据文档，您不应该使用 ref 作为公开 API 的手段，可以这么说。

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