什么是 inntec-react-utils？
inntec-react-utils 是一个为 React 开发者提供帮助的 npm 包。这个库内部集成了一些常用的 React 工具函数和组件，以帮助开发者更轻松地完成工作。
如何安装 inntec-react-utils？
可以通过 npm 进行安装：
npm install inntec-react-utils --save
如何使用 inntec-react-utils？
inntec-react-utils 可以通过 ESModule 或者 CommonJS 的方式引入到你的项目中。
引入整个库
// ESModule
import * as ReactUtils from 'inntec-react-utils';
// CommonJS
const ReactUtils = require('inntec-react-utils');只引入所需部分
// ESModule
import { FormUtils, LoadingSpinner } from 'inntec-react-utils';
// CommonJS
const { FormUtils, LoadingSpinner } = require('inntec-react-utils');可用的工具函数
FormUtils.normalizeFields
这个函数可以把表单错误对象中，每个错误的 field 属性转换成对应的表单控件名称，方便直接在表单控件中展示错误提示。
用法：
-- -------------------- ---- ------- ------ - --------- - ---- --------------------- ----- ----------- - - ------- ------ ------- --- ------- ------ ------- --- -- ----- ---------------- - -------------------------------------- -------------- -- ---------------- ---- -- - -- -------------- ------ ------- --- -- -------------- ------ ------- --- -- - -- ------------ --------------- ----- --------------- -- - -- ------- ---------------- -- ------- ---------------- -- -
FormUtils.normalizeErrors
这个函数可以把 Express 风格的错误对象转换成可用于复杂表单的错误格式。错误对象可以由 express-validation 这个库生成。
用法：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------
----- ----------- - -
------- -
-
--------- -------
---- -------- ----- --------
------ --------------
------ ---- - ----- --------
--
-
--------- -------
---- --------- ------ -- -- ----- - ---------- ------
------ -----------
------ --------
--
--
--
----- ---------------- - ---------------------------------------
-- ---------------- ----
-- -
-- ------------ -------- ----- --------
-- --------- --------- ------ -- -- ----- - ---------- ------
-- -FormUtils.makeFieldDirty
这个函数可以将表单控件设置为已修改，从而让错误提示及时生效。它接受表单中摸个控件的 name，以及一个函数作为参数。
用法：
-- -------------------- ---- -------
------ - --------- - ---- ---------------------
----- ----------- ------- --------------- -
----------------- - ----- -- -
----- --------- - ------------------
----- ----- - -------------------
--------------- ------------ ----- -- -- -- -
-- -- ---------- --
----------------------------------- -- -- -
-- ----------------
---
---
--
-------- -
------ -
------
------ ----------- --------------- --------------------------------- --
------ ----------- --------------- --------------------------------- --
-------
--
-
-可用的组件
LoadingSpinner
这个组件提供了一个在页面上显示 loading 状态的 spinner。
用法：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------
----- ----------- ------- --------------- -
----- - - ---------- ---- --
-------------- - -- -- -
------------------- -- -
--------------- ---------- ----- ---
---
--
-------- -
------ -
--
------- ---------------------------------- -------------
--------------------- -- --------------- ---
---
--
-
-ErrorBoundary
这个组件提供了一个错误边界，可以捕捉子组件在渲染时抛出的错误。可以在组件挂掉之前展示友好的错误提示。
用法：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------------
----- ----------- ------- --------------- -
-------- -
------ -
---------------
--------------- --
----------------
--
-
-结论
inntec-react-utils 是一个集成了许多实用工具函数和组件的 npm 库。它可以帮助开发者更高效地进行 React 开发。本文介绍了它的安装与使用方法，并详细阐述了其中每个工具函数和组件的使用方法和意义。
我们相信，通过使用 inntec-react-utils，你的 React 开发将会更加轻松愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0281e8991b448d9a06