前言
在 React 应用中，我们常常会使用 Immutable.js 来方便我们处理可变数据结构。然而，React 默认的 PropTypes 并不支持 Immutable.js 中数据类型的验证。这就需要我们使用其他的工具来验证 Immutable.js 中的数据类型。本文向大家介绍了一个名为 react-immutablejs-proptypes 的 npm 包，来实现这个目标。
安装
在项目目录下可以使用 npm 进行安装：
$ npm install react-immutablejs-proptypes
此时，你还需要安装 Immutable.js，如果你还没有安装：
$ npm install immutable
使用
使用 react-immutablejs-proptypes 引用 Immutable.js 的数据类型并验证它们：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- ------------------------------
------ ------------------ ---- ----------------------------
------ - --- - ---- ------------
----- ----------- - -- --- -- -- -
-----
-----------------
------
--
--------------------- - -
---- -------------------------------------
--
------ ------- ------------该组件接受一个 map 的 Immutable 数据类型，而 PropTypes.instanceOf 允许我们通过传递带特定属性的对象实例来验证它。
与 react-immutablejs-proptypes 相关的 PropTypes 可以在导入模块中访问：
import PropTypes from 'react-immutablejs-proptypes';
console.log(PropTypes);
// { list: [Function], map: [Function], orderedMap: [Function], record: [Function] }此外，我们还可以使用 ImmutablePropTypes 来验证更复杂的数据类型结构，例如：范围、列表和记录。
-- -------------------- ---- -------
------ ------------------ ---- ----------------------------
------ - ----- ------ - ---- ------------
----- ---------- - --------
-- -----
-- -----
---
----- ----------- - --------
------ -----------
---- -----------
---
----- ----------- - -- ----- ------ ------ -- -- -
-----
---------------- ------ -- -
---- ------------------------------------
---
----------------------------------------
-------------------------------
------
--
--------------------- - -
----- ----------------------------------------------------------
----- -----------------
---------------
------ -----------------------------
------ --------------------------------------
---- --------------------------------------
--------------
------- ----------------------------------
--
------------------------ - -
----- -------
------ --------------
------- ---------
--
------ ------- ------------上述示例中我们使用了 ImmutablePropTypes.recordOf 来验证复杂记录类型数据。我们也使用了默认属性来修复未提供的属性。
总结
react-immutablejs-proptypes 可以很方便地扩展 PropTypes 对 Immutable.js 中类型的验证。当使用 Immutable.js 时候常常需要调试，因为在使用普通对象来代表 Immutable.js 中类型时 propTypes 无法验证数据类型是否正确。使用 react-immutablejs-proptypes 可以很容易将 Immutable.js 的类型纳入验证。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cba81e8991b448e629e