重拳出击！React造轮第二弹：Dialog组件直击痛点

前端

2023-11-15 02:10:26

前言

提到简历项目，很多初学者都会遇到一个问题：没有项目可写。为了帮助大家解决这个难题，我特意打造了React造轮系列，帮助大家从零开始，一步步搭建自己的项目。

本轮子将使用React + TypeScript + Webpack作为技术栈，打造一个功能强大的对话框组件。告别冗杂的代码和框架依赖，用最简洁的方式实现弹框交互。

本文适合人群：

想学习React组件开发的新手
想深入理解React工作原理的开发者
想打造自己的前端项目库的同学
对UI组件开发感兴趣的开发者

本文内容：

对话框组件介绍
Dialog组件搭建步骤
Dialog组件功能解析
Dialog组件使用案例

温馨提示：

为了更好地理解本文，建议您具备一定的React基础。
本文的源码已上传至GitHub，欢迎大家下载学习。

对话框组件介绍

对话框组件，又称弹窗组件或模态框，是一种常见的前端UI组件。它可以用来显示提示信息、收集用户输入或进行确认操作。对话框组件通常由一个弹出窗口和一个遮罩层组成，当用户点击按钮或触发某个事件时，对话框组件就会出现。

Dialog组件搭建步骤

1. 初始化项目

首先，我们需要创建一个新的React项目。可以使用create-react-app工具快速创建一个React项目。

npx create-react-app dialog-component

2. 安装依赖项

接下来，我们需要安装所需的依赖项。

npm install typescript @types/react @types/react-dom

3. 配置TypeScript

在tsconfig.json文件中，我们需要添加以下配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "./build",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noImplicitAny": false,
    "skipLibCheck": true
  },
  "include": [
    "src"
  ]
}

4. 创建Dialog组件

在src文件夹下，创建一个Dialog.tsx文件，并添加以下代码：

import React, { useState } from 'react';
import { createPortal } from 'react-dom';

interface DialogProps {
  title: string;
  content: string;
  visible: boolean;
  onClose: () => void;
}

const Dialog: React.FC<DialogProps> = (props) => {
  const { title, content, visible, onClose } = props;

  const handleClose = () => {
    onClose();
  };

  return createPortal(
    <>
      <div className="modal-backdrop fade show" />
      <div className="modal modal-dialog-centered" role="dialog" aria-modal="true">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title">{title}</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={handleClose}>
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              {content}
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-primary" onClick={handleClose}>关闭</button>
            </div>
          </div>
        </div>
      </div>
    </>,
    document.getElementById('modal-root')
  );
};

export default Dialog;

5. 使用Dialog组件

在App.tsx文件中，添加以下代码：

import React, { useState } from 'react';
import Dialog from './Dialog';

const App: React.FC = () => {
  const [visible, setVisible] = useState(false);

  const handleOpenDialog = () => {
    setVisible(true);
  };

  const handleCloseDialog = () => {
    setVisible(false);
  };

  return (
    <>
      <button type="button" className="btn btn-primary" onClick={handleOpenDialog}>打开对话框</button>
      <Dialog
        title="这是一个对话框"
        content="这是一个对话框的内容"
        visible={visible}
        onClose={handleCloseDialog}
      />
    </>
  );
};

export default App;