React Confirm 安装和配置指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_09331/article/details/142229770

React Confirm 安装和配置指南

react-confirm Small library which makes your Dialog component callable. 项目地址: https://gitcode.com/gh_mirrors/re/react-confirm

1. 项目基础介绍和主要编程语言

项目基础介绍

react-confirm 是一个轻量级的 React 库，旨在简化在 React 应用程序中实现确认对话框的过程。它提供了一个基于 Promise 的 API，可以与 async/await 语法无缝集成，类似于浏览器的 window.confirm 方法。该库的主要特点是它不提供特定的视图或组件，允许用户轻松自定义对话框的外观，以匹配应用程序的设计。

主要编程语言

该项目主要使用 TypeScript 和 JavaScript 进行开发。

2. 项目使用的关键技术和框架

关键技术和框架

React: 用于构建用户界面的 JavaScript 库。
TypeScript: 提供了类型检查和更强大的工具支持。
React Bootstrap: 用于创建响应式、移动优先的前端组件。
Jest: 用于单元测试。

3. 项目安装和配置的准备工作和详细的安装步骤

准备工作

在开始安装和配置 react-confirm 之前，请确保你已经安装了以下工具和依赖：

Node.js: 确保你已经安装了 Node.js（建议版本为 14.x 或更高）。
npm 或 yarn: 用于管理项目的依赖包。
React 项目: 确保你已经有一个 React 项目，或者你可以通过 create-react-app 快速创建一个。

安装步骤

步骤 1: 创建 React 项目（如果你还没有）

如果你还没有一个 React 项目，可以使用 create-react-app 快速创建一个：

npx create-react-app my-react-app
cd my-react-app

步骤 2: 安装 `react-confirm`

在你的 React 项目根目录下，运行以下命令来安装 react-confirm：

npm install react-confirm

或者如果你使用 yarn：

yarn add react-confirm

步骤 3: 创建确认对话框组件

在你的项目中创建一个新的组件文件，例如 ConfirmDialog.tsx，并添加以下代码：

import * as React from 'react';
import { confirmable, ConfirmDialog } from 'react-confirm';

interface Props {
  confirmation: string;
}

const Confirmation: ConfirmDialog<Props, boolean> = ({ show, proceed, confirmation }) => (
  <div>
    <p>{confirmation}</p>
    <button onClick={() => proceed(false)}>取消</button>
    <button onClick={() => proceed(true)}>确定</button>
  </div>
);

export default confirmable(Confirmation);

步骤 4: 创建确认函数

在你的项目中创建一个新的文件，例如 confirm.ts，并添加以下代码：

import { createConfirmation } from 'react-confirm';
import ConfirmDialog from './ConfirmDialog';

export const confirm = createConfirmation(ConfirmDialog);

步骤 5: 使用确认对话框

现在你可以在你的 React 组件中使用 confirm 函数来显示确认对话框。例如，在一个按钮的点击事件中：

import React from 'react';
import { confirm } from './confirm';

const MyComponent = () => {
  const handleClick = async () => {
    if (await confirm({ confirmation: '你确定要继续吗？' })) {
      console.log('用户点击了确定');
    } else {
      console.log('用户点击了取消');
    }
  };

  return (
    <button onClick={handleClick}>点击我</button>
  );
};

export default MyComponent;