在 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 文件。