在前端开发中，Dialog 应该是经常用到的一个组件，特别是现在流行的 SPA 应用中，通常是通过弹出一个 Dialog 来显示某些信息或进行特定操作。而 @shortcm/react-dialog 就是一款非常好用且常用的 React Dialog 组件，该组件非常轻量且易于使用，可以极大的提高前端开发效率。
本文将会提供 @shortcm/react-dialog 的详细使用教程，让读者可以在稍作配置之后即可轻松的集成到自己的项目中，并且可以根据自己的具体需求进行扩展或定制。
安装
@shortcm/react-dialog 是一个 npm 包，可以使用 npm 或 yarn 进行安装，安装命令如下：
npm install @shortcm/react-dialog --save
或者使用 yarn：
yarn add @shortcm/react-dialog
使用
使用 @shortcm/react-dialog 可以非常方便的实现弹窗功能，将其引入即可开始使用。在 React 中，可以这样引入：
import Dialog from '@shortcm/react-dialog';
基本使用方式如下：
<Dialog
visible={this.state.visible} // 控制是否显示
title="弹窗标题" // 弹窗标题
width={400} // 弹窗宽度
onCancel={this.handleClose} // 点击取消按钮时的回调函数
>
弹窗内容
</Dialog>以上代码演示了如何通过传入一些 props 属性来控制弹窗的显示和内容，非常简单、直观且易于使用，弹窗组件具体用法可以参考官方文档。
高级用法
除了基本的使用方式外，@shortcm/react-dialog 还支持一些高级用法，可以更加灵活、丰富的使用 Dialog 组件。
传入子组件
在某些场景下，我们希望 Dialog 组件可以接受子组件作为弹窗内容，这时可以使用 children 属性：
<Dialog visible={this.state.visible} width={400}>
<CustomComponent />
</Dialog>在上述场景下，CustomComponent 将会作为 Dialog 的弹窗内容进行展示。
自定义按钮
除了默认的取消和确定按钮外，@shortcm/react-dialog 还支持自定义按钮，并提供了一些接口用于自定义按钮的文字、样式以及回调函数。
<Dialog
visible={this.state.visible}
onCancel={this.handleClose}
onOk={this.handleConfirm}
>
弹窗内容
</Dialog>在使用自定义按钮时，需要注意回调函数的实现，以保证其正常的执行逻辑。
链式调用
@shortcm/react-dialog 提供了链接式调用的方式，使得在某些特定场景下可以更加方便的对组件进行操作或者定制。
dialog
.setType('success')
.setTitle('操作成功')
.setContent('完成了一项非常重要的操作')
.setOkText('好的')
.setStatus({ destroyOnClose: true })
.setVisible(true);通过链接式调用的方式，可以方便的进行组件的链式操作，链式调用的具体内容可以通过查看官方文档获取更多的信息。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ------------------------
----- --- ------- --------- -
----- - -
-------- ------
--
----------- - -- -- -
--------------- -------- ---- ---
--
----------- - -- -- -
--------------- -------- ----- ---
--
-------- -
------ -
-----
------- ----------------------------- ---------------
-------
----------------------------
-------------
---------------------------
-------- -- -------------
-
-----
---------
------
--
-
-
------ ------- ----以上代码演示了如何在 React 中使用 @shortcm/react-dialog 组件，并且可以自定义标题、内容以及操作按钮的内容和回调函数。读者可以在此基础上进行更多的操作，以满足自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d09270238223a8