如何在React中实现可通过函数调用渲染的自定义组件？

要实现像SweetAlert那样通过函数直接调用渲染组件的机制，核心思路是利用ReactDOM.createPortal将组件挂载到独立DOM节点，再封装函数来控制组件的生命周期。以下是具体步骤：

1. 编写基础弹窗UI组件 #

先实现你的ConfirmationDialog组件，接收业务所需的参数和回调：

// ConfirmationDialog.jsx
import React from 'react';

export default function ConfirmationDialog({ message, onConfirm, onCancel, onClose }) {
  return (
    <div style={{
      position: 'fixed',
      inset: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 9999
    }}>
      <div style={{
        backgroundColor: '#fff',
        padding: '24px',
        borderRadius: '8px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
        minWidth: '300px'
      }}>
        <p style={{ margin: '0 0 16px' }}>{message}</p>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
          <button
            onClick={() => {
              onCancel?.();
              onClose();
            }}
            style={{ padding: '6px 12px', cursor: 'pointer' }}
          >
            取消
          </button>
          <button
            onClick={() => {
              onConfirm?.();
              onClose();
            }}
            style={{ padding: '6px 12px', cursor: 'pointer', backgroundColor: '#165DFF', color: '#fff', border: 'none', borderRadius: '4px' }}
          >
            确认
          </button>
        </div>
      </div>
    </div>
  );
}

2. 封装全局调用函数 #

创建工具函数，负责动态创建DOM容器、渲染组件以及清理资源：

// confirmationDialog.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import ConfirmationDialog from './ConfirmationDialog';

export default function ConfirmationDialog(options) {
  // 创建临时DOM容器
  const container = document.createElement('div');
  document.body.appendChild(container);

  // 定义关闭逻辑：卸载组件并移除DOM节点
  const handleClose = () => {
    root.unmount();
    document.body.removeChild(container);
  };

  // 渲染弹窗组件
  const root = ReactDOM.createRoot(container);
  root.render(
    <ConfirmationDialog
      {...options}
      onClose={handleClose}
    />
  );

  // 返回手动关闭方法，支持外部主动关闭
  return {
    close: handleClose
  };
}

3. 全局可用配置（可选） #

如果希望不用每次import就能调用，可在项目入口文件（如index.js）中将函数挂载到window对象：

// index.js
import ConfirmationDialog from './confirmationDialog';

window.ConfirmationDialog = ConfirmationDialog;

4. 实际调用示例 #

在任意组件或逻辑中，直接像函数一样调用即可：

// 示例组件
import React from 'react';
import ConfirmationDialog from './confirmationDialog';

function DemoComponent() {
  const handleConfirm = () => {
    console.log('用户确认操作');
  };

  const handleCancel = () => {
    console.log('用户取消操作');
  };

  const openDialog = () => {
    // 调用弹窗
    const dialogInstance = ConfirmationDialog({
      message: 'test',
      onConfirm: handleConfirm,
      onCancel: handleCancel
    });

    // 可选：3秒后自动关闭
    setTimeout(() => {
      dialogInstance.close();
    }, 3000);
  };

  return (
    <button onClick={openDialog}>打开确认弹窗</button>
  );
}

export default DemoComponent;

进阶优化建议 #

• 添加重复调用拦截：避免短时间内多次点击创建多个弹窗
• 支持动态更新：通过维护状态，允许调用后更新弹窗内容
• 加入过渡动画：利用React的CSSTransition实现弹窗的淡入淡出效果
• 封装通用弹窗工厂：基于基类扩展不同类型的弹窗（警告、成功、提示等）

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