简介
react-pure-props 是一个 React 组件库，它可以帮助你更好地处理 React 组件的 props，减少代码重复，提高代码的可维护性。
特性
- 支持对 props 的类型进行限制
- 支持对 props 的值进行限制
- 支持对 props 的默认值进行设置
- 支持复杂类型的 props 校验
安装
可以通过 npm 安装该组件库：
npm i react-pure-props --save
使用
使用 react-pure-props 可以通过两种方式：
基础用法
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
----- ------ - -----------
----- -------
---------- -------
-------- --------------------
--------- --------
-- -
---------- -----------------------
--------- ------
---------- -- -
----- - ----- ---------- -------- -------- - - ------
------ -
-------
---------------------
-----------------
-------------------
-
------
---------
--
---
------ ------- -------高级用法
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ --------- ---- -------------------
----- ------ - -----------
----- -------
---------- -------
-------- --------------------
--------- --------
------ -----------------
------ ----------------------------
------- ----------------------------
---------------- ----------------------------
---
---------- -- -
----- - ----- ---------- -------- --------- ----- - - ------
------ -
-------
---------------------
-----------------
-------------------
-------------
-
------
---------
--
---
------ ------- -------API
PureProps(shape, [defaults])(component)
shape(Object): props 的类型和值限制。defaults(Object, 可选): 默认值。component(Function): 组件。
参数
shape
shape 是一个对象，它指定了 props 的类型和值的限制。它的每个属性标识了一个 prop 的键值。
如果需要对一个 prop 进行限制，可以为该 prop 指定一个类型验证器。可以使用 PropTypes 模块提供的类型验证器，也可以使用自己定义的类型验证器。
-- -------------------- ---- -------
-
---- -----------------
---- -----------------
---- ------- ----- ---------- -- -
-- ------------ --- ------ -
------ --- ------
-------- ---- ----------- -------- -- ------------------
--
-
--
-支持的类型验证器有：
- PropTypes.array
- PropTypes.bool
- PropTypes.func
- PropTypes.number
- PropTypes.object
- PropTypes.string
- PropTypes.symbol
如果需要对一个 prop 的键值进行限制，可以使用 oneOf 和 oneOfType：
{
foo: PropTypes.oneOf(['a', 'b', 'c']),
bar: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
}如果需要对一个 prop 的复杂类型进行限制，可以使用 shape：
{
style: PropTypes.shape({
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
backgroundColor: PropTypes.string.isRequired,
}),
}defaults
defaults 是可选的，它是一个对象，它指定了默认的 props 值。
{
bar: 'default value',
baz: 123,
}如果一个 prop 没有提供默认值，则会认为它的默认值是 undefined。
component
component 是一个函数，它接收 props 参数，并返回一个 React 元素。
(props) => {
return <div>{props.bar}</div>;
}示例
对 props 进行类型限制
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
----- ----------- - -----------
---- ------------------
---- -------
---- ------- ----- ---------- -- -
-- ------------ --- ------ -
------ --- ------
-------- ---- ----------- -------- -- ------------------
--
-
--
---
------ ------- ------------对 props 进行默认值限制
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------------
----- ------ - -----------
----- -------
---------- -------
-------- --------------------
--------- --------
-- -
---------- -----------------------
--------- ------
---------- -- -
----- - ----- ---------- -------- -------- - - ------
------ -
-------
---------------------
-----------------
-------------------
-
------
---------
--
---
------ ------- -------对复杂类型的 props 进行校验
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ --------- ---- -------------------
----- ------ - -----------
----- -------
---------- -------
-------- --------------------
--------- --------
------ -----------------
------ ----------------------------
------- ----------------------------
---------------- ----------------------------
---
---------- -- -
----- - ----- ---------- -------- --------- ----- - - ------
------ -
-------
---------------------
-----------------
-------------------
-------------
-
------
---------
--
---
------ ------- -------结论
react-pure-props 是一个非常实用的 React 组件库，它可以极大地提高代码的可维护性，减少重复代码并提高代码的可读性。值得开发者们在日常开发中了解并使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067365890c4f7277584029