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

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

1. 基本结构

使用antd中的Modal组件构建对话框
使用antd中的Tooltip组件构建点击按钮的悬浮提示
使用antd中的Button组件构键打开对话框的按钮
提供内部强制刷新的方法接口
提供外部强制刷新的属性接口
使用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';

导入了 React、useState 钩子以及 Button、Modal 和 Tooltip 组件。
还导入了 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，显示对话框。
handleOk 和 handleCancel 函数分别用于确认和取消操作，将 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;