Bootstrap Modal 是一种常见的弹出窗口，它能够轻松地在网页中显示各种内容。React.js 是一个流行的 JavaScript 库，用于构建用户界面。本文将介绍如何在 React.js 中使用 Bootstrap Modal。
安装 Bootstrap
在 React 项目中使用 Bootstrap Modal 需要先安装 Bootstrap。
可以通过以下命令使用 npm 安装 Bootstrap：
npm install bootstrap
或者通过 CDN 引入 Bootstrap：
<!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <!-- JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
创建 Modal
要在 React.js 中创建 Bootstrap Modal，需要先创建一个组件来承载 Modal 的内容。我们可以使用 React 的类组件或函数组件来创建这个组件。
下面是一个使用函数组件创建的简单例子：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----- - ---- ------------------
-------- --------- -
----- ------ -------- - ----------------
----- ----------- - -- -- ---------------
----- ---------- - -- -- --------------
------ -
--
------- ----------------- ---------------------
-- -----
---------
------ ----------- ---------------------
------------- ------------
------------------ ----------------
---------------
------------
---- ----- ----
-------------
--------------
------- ------------------- ----------------------
--
---------
------- ----------------- ----------------------
----
---------
---------------
--------
---
--
-
------ ------- --------在这个例子中，我们首先导入了 React 和 react-bootstrap，然后创建了一个名为 MyModal 的函数组件。该组件使用 useState 钩子来管理 Modal 是否显示的状态，并且定义了两个方法 handleClose 和 handleShow 来控制 Modal 的显示和隐藏。
接下来，在组件的返回值中，我们创建了一个包含打开 Modal 按钮和 Modal 内容的 JSX 元素。当用户点击按钮时，Modal 会显示出来。Modal 使用了 react-bootstrap 中的 Modal 组件，它接受 show 和 onHide 属性来控制 Modal 的显示和隐藏。
传递参数
有时候，我们需要在 Modal 中显示一些动态内容，例如从 API 获取的数据。在这种情况下，我们可以通过 props 将数据传递给 Modal 组件。以下是一个简单的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----- - ---- ------------------
-------- -------------- -
----- ------ -------- - ----------------
----- ----------- - -- -- ---------------
----- ---------- - -- -- --------------
------ -
--
------- ----------------- ---------------------
-- -----
---------
------ ----------- ---------------------
------------- ------------
----------------------------------------
---------------
------------
----------------
-------------
--------------
------- ------------------- ----------------------
--
---------
------- ----------------- ----------------------
----
---------
---------------
--------
---
--
-
------ ------- --------在这个示例中，我们将 title 和 children 作为 props 传递给 MyModal 组件。title 是一个字符串，表示 Modal 的标题。children 可以是任何 React 元素，表示 Modal 的内容。
总结
通过本文的介绍，我们学习了如何在 React.js 中使用 Bootstrap Modal。我们首先安装了 Bootstrap，然后
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28392