在 React 应用程序中使用 React-Bootstrap 模式

1. React 中的 Bootstrap 3 模态
2. React 中的 Bootstrap 4 和 5 模态

你之前可能遇到过模态。它们看起来像弹出窗口，并在你单击特定按钮或执行其他操作后出现。你也可以在自己的 React 应用程序中使用它们。

如果使用得当，模态可以改善 React 应用程序的用户体验。

它们对于吸引用户注意网站的基本功能或获取他们的意见非常有效。例如，如果你的用户不小心点击删除了一个重要的 UI 项目，你可以使用模式询问他们是否确定他们的选择。

在开发 React 应用程序时，你可以使用常规 JavaScript、HTML 和 CSS 创建自定义 Modal 组件。但是，除非你确定需要自定义解决方案，否则你可以通过使用来自 UI 库（如 Bootstrap）的模态来节省大量时间。

React 中的 Bootstrap 3 模态

React-Bootstrap 是一个为 React 调整的流行库版本。它提供了与原始 Bootstrap 版本 3 具有相同功能和特性的自定义 React 组件。

使用像 React-Bootstrap 这样的库可以让你使用常见的 UI 元素，而无需从头开始编写它们。

从该库中导入的 Modal 组件提供了你可能需要的所有功能。一旦你导入了它，你就不再需要违背 React 的模式并直接改变 DOM。

你可以通过打开 shell 并键入以下命令来安装它：

npm install react-bootstrap

react-bootstrap 库最好的部分是它可以单独导入单个组件。这样，你可以最小化包大小并使你的应用加载速度更快。

从 React-Bootstrap 库中包含模式的最简单方法是在应用程序的顶部声明一个导入语句：

import Modal from 'react-bootstrap/Modal';

React-Bootstrap 库的唯一缺点是它只支持 Bootstrap 3。

React-Bootstrap 库让你可以自由地自定义 Modal 组件的外观和功能。你可以调整其动画、浏览器中的位置和大小，仅举几例。通过阅读官方指南了解有关 React-Bootstrap 模态的更多信息。

React 中的 Bootstrap 4 和 5 模态

如果你希望使用 Bootstrap 4 或更新的版本 5，最好的选择是使用 react-strap 包。由于这个包没有它的样式，你必须安装核心 bootstrap 包并导入它的 CSS 文件。

要安装 react-strap 包，你必须打开命令行并输入以下代码：

npm install reactstrap

安装完成后，你可以将 Modal 组件导入到你的应用程序中。下面是一个例子：

import React from 'react';
import { Modal } from 'reactstrap';

Modal 组件是专门为 React 构建的。你可以使用 isOpen、toggle 和 size 等 props 自定义其行为。你甚至可以选择启用或禁用淡入淡出动画。

react-strap 包为你提供了很大的自由来自定义其组件的行为。要了解有关你可以使用的选项的更多信息，请查看官方 react-strap 文档。