简介
wjsjtu-reactjs 是 wjsjtu 团队开发的针对 React.js 框架的一个 npm 包，用于方便地处理一些通用的前端问题。该包已经发布到 npm 官方仓库中，并且在 wjsjtu 团队的前端项目中广泛应用。本文将详细介绍该包的使用教程。
安装
使用 npm 命令行工具安装 wjsjtu-reactjs：
npm install wjsjtu-reactjs
使用
引入
在需要使用 wjsjtu-reactjs 的文件中引入：
import React from 'react'; import wjsjtu from 'wjsjtu-reactjs';
toast
wjsjtu.toast.show('message');wjsjtu-reactjs 提供了 toast，用于展示全局的提示信息。可以通过 show 方法传入需要展示的提示信息，比如：
wjsjtu.toast.show('保存成功');confirm
wjsjtu.confirm.show({
title: 'title',
message: 'message',
confirmButtonText: 'ok',
cancelButtonText: 'cancel',
onConfirm: () => console.log('confirm'),
onCancel: () => console.log('cancel')
});wjsjtu-reactjs 提供了 confirm，用于展示全局的确认弹窗。可以通过 show 方法传入需要展示的确认信息，比如：
wjsjtu.confirm.show({
title: '请确认',
message: '是否确认删除',
confirmButtonText: '删除',
cancelButtonText: '取消',
onConfirm: () => console.log('确认删除'),
onCancel: () => console.log('取消删除')
});Loading
const loading = wjsjtu.loading({
text: 'loading'
});
loading.hide();wjsjtu-reactjs 提供了 loading，用于展示全局的加载状态。可以通过 loading 方法创建一个实例，然后进行 show 和 hide 操作，比如：
-- -------------------- ---- ------- ----- ------- - ---------------- ----- -------- --- -- ---- ------- --------------- -- ---- ------- ---------------
form
-- -------------------- ---- -------
------ - ----- -------- - ---- -----------------
----- ----------- - -- -- -
----- ------ - ---------------
----- -------- - -------- -- -
--------------------
--
------ -
-----
-----------
-------------------
-
---------
-----------
---------------
--------- --------- ----- -------- -------- ---
-
------ --
-----------
---------
----------
---------------
--------- --------- ----- -------- ------- ---
-
--------------- --
-----------
----------
-------
--------------
-----------------
-
--
---------
-----------
-------
--
--wjsjtu-reactjs 提供了 form，用于简化表单的处理。可以通过代码片段快速了解如何使用：
- 引入 Form 和 FormItem；
- 使用 Form.useForm() 创建表单实例；
- 在 FormItem 中传入表单项的 label、name 和 rules 等信息；
- 在 Form 中传入表单实例和 onFinish 方法，即可在表单提交时获取表单数据。
pagination
-- -------------------- ---- -------
------ - ---------- - ---- -----------------
----- ----------------- - -- -- -
----- ------------- --------------- - ------------
----- ---------- ------------ - -------------
----- -------- - ------ ----- -- -
---------------------
------------------
--
------ -
-----------
---------------------
-------------------
-----------
-------------------
--
--
--wjsjtu-reactjs 提供了 pagination，用于展示分页信息。可以通过代码片段快速了解如何使用：
- 引入 Pagination 组件；
- 在组件中传入当前页码、每页条数、总数据量和 onChange 方法，即可展示分页信息。
总结
本文介绍了 wjsjtu-reactjs 的使用教程，包括 toast、confirm、loading、form 和 pagination 等功能的使用方法。在实际开发中，wjsjtu-reactjs 提供了许多常用的前端功能，可以大大提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710e8dd3466f61ffe1bf