如何在反应功能组件中将 ref const 从父组件传递给子组件？答案

【问题标题】：How to pass ref const from parent to child component in react functional component?如何在反应功能组件中将 ref const 从父组件传递给子组件？
【发布时间】：2020-10-21 11:40:03
【问题描述】：

我正在处理 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 };

我正在尝试使用上述代码，但它不起作用，请告诉我我错在哪里。谢谢

【问题讨论】：

标签： reactjs react-hooks use-ref

【解决方案1】：

有一些地方出了问题。首先，ref prop 有特殊含义，除非你使用React.forwardRef()，否则不会传递给组件。

那么，根据docs，您不应该使用 ref 作为公开 API 的手段。

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

【讨论】：