在 Web 开发中，React 是一款非常流行的前端框架。而在 React 中，通常需要用到 Modal（模态框）组件，以实现一些交互效果。@bisudev/bisu-react-modal 是一个 React Modal 组件库，本文将详细介绍它的用法。
安装
首先，我们需要在项目中安装 @bisudev/bisu-react-modal：
npm i @bisudev/bisu-react-modal --save
或者使用 yarn：
yarn add @bisudev/bisu-react-modal
使用
引入组件
在你的组件文件中，引入需要的组件：
import { BisuModal } from '@bisudev/bisu-react-modal';使用组件
然后，在组件中使用 BisuModal 组件，可通过 isOpen、onClose、onSubmit、header 和 body 等属性来设置弹出框的状态及内容：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ----------------------------
-------- ------------------ -
----- ----------- ------------- - ----------------
----- ---------------- - -- -- -
--------------------
--
----- --------------- - -- -- -
-------------------
--
----- ---------------- - ------ -- -
------------------
-------------------
--
------ -
-----
------- ------------------------------ --------------
----------
------------------
--------------------------
---------------------------
------------- -------
------
------
-------
-----
------ ----------- ----------- --
--------
------- -----------------------------
-------
-
--
------
--
-Props
BisuModal 组件支持以下属性：
| Name | Type | Default | Description |
|---|---|---|---|
| isOpen | boolean | false | 控制弹出框是否显示的状态 |
| onClose | function | - | 弹出框关闭时的回调方法 |
| onSubmit | function | - | 弹出框提交时的回调方法 |
| header | string | - | 弹出框标题 |
| body | React Node | - | 弹出框内容的 React 组件或 HTML 元素，通常是一个表单或一些文字 |
| customClose | React Node | - | 自定义关闭按钮的 React 组件或 HTML 元素 |
| customSubmit | React Node | - | 自定义提交按钮的 React 组件或 HTML 元素 |
| customBackground | React Node | - | 自定义背景元素的 React 组件或 HTML 元素 |
示例
下面是一个样例，展示了如何在 BisuModal 组件中使用自定义按钮、背景和样式等。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ----------------------------
------ ----------------
-------- ------------------ -
----- ----------- ------------- - ----------------
----- ---------------- - -- -- -
--------------------
--
----- --------------- - -- -- -
-------------------
--
------ -
-----
------- ------------------------------ --------------
----------
------------------
--------------------------
------------- ------
------
------
-------
-----
------ ----------- ----------- --
--------
-------
------
------ ------------ ------------ --
--------
-------
-
-------------
------- ----------------------- ---------------------------
----
----------
-----------
---------- - -- ---
-----------
----------------------------------
-
-----
-------- ---------- ---------- ----------- -----
--------------
---------------
--
------
---------
-
--------------
------- ------------------------ --------------
------
---------
-
---------------------- ------------------------------
--
------
--
-现在，你已经可以使用 @bisudev/bisu-react-modal 组件库来实现自己的弹出框了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f181e8991b448d507e