React通用确认提示框封装组件

封装一个提示选择框，其实就是把常见的确认框封装成一个可以复用的组件。你可以轻松自定义它的提示信息和执行的操作。这个小组件不仅能提升用户体验，也能让你的代码更清晰，减少重复工作。通过封装，用户点击“取消”时可以关闭框，点击“确定”时可以执行自定义函数。嗯，其实不管是在 React、Vue，还是 JavaScript，你都能轻松实现。想象一下，开发一个 App 时，突然需要在多个地方展示确认框，你直接复用这个组件就好，省心又高效。

要封装一个组件，得创建 HTML 结构，再加上适当的 CSS 样式，让它看起来整洁且居中。，利用 JavaScript 交互逻辑，添加“取消”和“确定”按钮的事件监听器。完成后，你就可以像调用普通函数一样调用这个组件。比如在 React 中，像这样调用：

import React from 'react';
function CustomAlert({ message, onConfirm }) {
  const handleClickCancel = () => {
    // 关闭提示框的逻辑
  };
  const handleClickConfirm = () => {
    onConfirm();
    // 关闭提示框的逻辑
  };
  return (
    

      
{message}
      <button onClick={handleClickCancel}>取消</button>
      <button onClick={handleClickConfirm}>确定</button>
    
  );
}
export default CustomAlert;

当你需要在其他地方调用时，只需传入你想展示的提示信息和点击“确定”后的回调函数。这样一来，所有地方都能使用同一个组件，保持一致的 UI 和行为。

总结起来，封装提示框其实是提升代码可维护性和复用性的好方法。如果你在开发中需要多次使用提示框，强烈推荐你封装一下，既能提升用户体验，又能让代码更模块化，维护起来更轻松。