React中如何让prop传入的按钮触发父方法，是否应改用children实现？

问题原因说明 #

你当前的component prop方案无法生效的核心原因是：你传入的无参函数组件没有接收上层传递的onClick属性，也没有将它绑定到实际的按钮元素上。如果要坚持该方案，需要要求用户透传props：

<Confirmation component={(props) => <MUIButton {...props}>Click me</MUIButton>} />

但该方案对用户使用成本更高，不符合你期望的无额外配置需求，更推荐使用children方案实现。

children方案实现（推荐） #

children是React更通用的复合组件写法，用户学习成本更低、使用更灵活，你可以通过React.cloneElement给传入的触发元素注入点击事件，同时不会覆盖元素原有的属性和事件逻辑，完整实现代码如下：

import { useState, cloneElement } from 'react';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

const Confirmation = ({
  children,
  title = '确认操作',
  content = '确定要执行该操作吗？',
  onConfirm,
  onCancel
}) => {
  const [open, setOpen] = useState(false);

  const openDialog = () => setOpen(true);
  const closeDialog = () => {
    onCancel?.();
    setOpen(false);
  };
  const confirmAction = () => {
    onConfirm?.();
    closeDialog();
  };

  // 克隆触发元素，注入弹窗打开逻辑
  const trigger = cloneElement(children, {
    onClick: (e) => {
      // 优先执行元素本身绑定的点击事件，避免逻辑丢失
      children.props.onClick?.(e);
      openDialog();
    }
  });

  return (
    <>
      {trigger}
      <Dialog open={open} onClose={closeDialog}>
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>{content}</DialogContent>
        <DialogActions>
          <Button onClick={closeDialog}>取消</Button>
          <Button onClick={confirmAction} color="primary">确认</Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

使用示例 #

用户不需要做任何额外的onClick配置，直接把触发按钮作为children传入即可：

<Confirmation onConfirm={() => console.log('执行确认操作')}>
  <MUIButton>Click me</MUIButton>
</Confirmation>

内容的提问来源于stack exchange，提问作者mmatila