React组件封装 -- 弹出对话框

封装一个函数式组件实现前端开发中经常遇到的场景: 点击按钮弹出对话框。此组件可以作为一个模板,具备弹窗的基本功能,遵循基于构件开发的设计原则。

1. 基本结构

  1. 使用antd中的Modal组件构建对话框
  2. 使用antd中的Tooltip组件构建点击按钮的悬浮提示
  3. 使用antd中的Button组件构键打开对话框的按钮
  4. 提供内部强制刷新的方法接口
  5. 提供外部强制刷新的属性接口
  6. 使用css-in-js技术实现Modal样式的自定义

2. 实现代码

js 复制代码
import React, { useState } from 'react';
import { Button, Modal, Tooltip } from 'antd';
import styled from 'styled-components'; 


const CustomModal = styled(Modal)`
  .ant-modal-content {
    border-radius: 8px;
  }

  .ant-modal-header {
    background-color: #f0f0f0;
  }

  .ant-modal-title {
    color: #333;
  }

  .ant-modal-body {
    padding: 20px;
  }

  .ant-modal-footer {
    border-top: none;
  }
`;



function MyComponent({ refreshKey }) {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [refresh, setRefresh] = useState(false);


  const handleClick = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const refreshComponent = () => {
    setRefresh(prevRefresh => !prevRefresh);
  };

  return (
    <div>
      <Tooltip title="这是一个提示文本">
        <Button onClick={handleClick}>点击弹出对话框</Button>
      </Tooltip>

      <CustomModal 
            title="对话框标题" 
            visible="{isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            okText="确定" 
            cancelText="取消" 
            maskClosable={true}
      >
        <p>这是一个对话框内容</p>
      </CustomModal>
    </div>
  );
}

export default MyComponent;

3. 详细解释

组件功能的详细说明:

jsx 复制代码
import React, { useState } from 'react';
import { Button, Modal, Tooltip } from 'antd';
import styled from 'styled-components';
  • 导入了 ReactuseState 钩子以及 ButtonModalTooltip 组件。
  • 还导入了 styled-components 库用于创建自定义样式组件。
jsx 复制代码
const CustomModal = styled(Modal)`
  .ant-modal-content {
    border-radius: 8px;
  }

  .ant-modal-header {
    background-color: #f0f0f0;
  }

  .ant-modal-title {
    color: #333;
  }

  .ant-modal-body {
    padding: 20px;
  }

  .ant-modal-footer {
    border-top: none;
  }
`;
  • 创建了一个名为 CustomModal 的自定义样式组件。
  • 使用 styled-components 库的语法将 Modal 组件作为基础组件进行样式设置。
  • .ant-modal-content 类选择器设置对话框内容区域的边框圆角为 8px
  • .ant-modal-header 类选择器设置对话框头部区域的背景颜色为 #f0f0f0
  • .ant-modal-title 类选择器设置对话框标题文字的颜色为 #333
  • .ant-modal-body 类选择器设置对话框内容区域的内边距为 20px
  • .ant-modal-footer 类选择器移除对话框底部区域的顶部边框。
jsx 复制代码
function MyComponent({ refreshKey }) {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [refresh, setRefresh] = useState(false);

  const handleClick = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const refreshComponent = () => {
    setRefresh(prevRefresh => !prevRefresh);
  };

  return (
    <div>
      {/* Tooltip 组件 */}
      <Tooltip title="这是一个提示文本">
        {/* Button 组件 */}
        <Button onClick={handleClick}>点击弹出对话框</Button>
      </Tooltip>

      {/* CustomModal 自定义样式组件 */}
      <CustomModal 
        title="对话框标题" 
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
        maskClosable={true}
      >
        <p>这是一个对话框内容</p>
      </CustomModal>
    </div>
  );
}

export default MyComponent;
  • 定义了名为 MyComponent 的函数组件,并接受一个名为 refreshKey 的属性,用来做外部的强制刷新。
  • 使用 useState 钩子创建了两个状态变量:isModalVisible(控制对话框的显示/隐藏)和 refresh(用于触发内部强制刷新)。
  • handleClick 函数在按钮点击时将 isModalVisible 设置为 true,显示对话框。
  • handleOkhandleCancel 函数分别用于确认和取消操作,将 isModalVisible 设置为 false,隐藏对话框。
  • refreshComponent 函数通过取反当前的 refresh 状态值来触发组件的重新渲染。
  • return 部分包含了 JSX 代码,其中:
    • <Tooltip> 组件用于添加提示文本,并嵌套了一个 <Button> 组件。
    • <CustomModal> 组件是自定义样式的对话框组件,传递了相关属性和事件处理程序。
    • <p> 标签是对话框的内容。

4. 使用示例

jsx 复制代码
import React, { useState } from 'react';
import MyComponent from './MyComponent';

function ParentComponent() {
  const [refreshKey, setRefreshKey] = useState(0);

  const handleRefresh = () => {
    setRefreshKey(prevKey => prevKey + 1);
  };

  return (
    <div>
      <button onClick={handleRefresh}>
        刷新子组件
      </button>

      <MyComponent refreshKey={refreshKey}>
    </MyComponent></div>
  );
}

export default ParentComponent;
相关推荐
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说8 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem9 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊9 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing9 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止9 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall9 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴9 小时前
简单入门Python装饰器
前端·python