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

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React 中的 Bootstrap 3 模态
  2. React 中的 Bootstrap 4 和 5 模态
在 React 应用程序中使用 React-Bootstrap 模式

你之前可能遇到过模态。它们看起来像弹出窗口,并在你单击特定按钮或执行其他操作后出现。你也可以在自己的 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 构建的。你可以使用 isOpentogglesize 等 props 自定义其行为。你甚至可以选择启用或禁用淡入淡出动画。

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn