什么是 react-prop-pipe
react-prop-pipe 是一个能够帮助你在 React 应用中处理属性的包。它能够帮助你很容易地处理属性的传送、变换与校验，并且支持链式调用。相信大家都知道有些场景下，组件间需要共用某些属性，但是该属性需要经过处理才能符合使用需求， react-prop-pipe 的出现，让你无需再为此苦恼！
安装
npm install react-prop-pipe
使用
要使用 react-prop-pipe，我们首先需要引入它：
import propPipe from 'react-prop-pipe'
接着，我们可以通过链式调用 propPipe 的 API 来进行属性处理。下面我们简单介绍下 API 的使用。
pipe
我们可以通过 pipe 两种方式进行属性处理。
第一种是传入处理函数，该函数将返回新的属性并交给下一个处理函数进行处理：
-- -------------------- ---- -------
----- -------- - ---------------
----------- -- --
---------
------ -------------------------
---
----------- -- --
---------
------------ -------------------------------
---
------上面的示例中，我们先处理了 title 属性，将其转为大写字母，再处理 description 属性，将其转为小写字母，最后我们就能得到新的属性 newProps。
第二种方式是传入 React 组件， propPipe 将根据组件 propTypes 中的属性进行处理：
const newProps = propPipe(props) .pipe(MyComponent) .pipe(AnotherComponent) .value
mapToProps
我们也可以通过 mapToProps 来进行属性处理。该 API 将会对组件的属性进行映射，并分发至下一个处理函数：
-- -------------------- ---- -------
----- -------- - ---------------
-------------
-------- -------
--
----------- -- --
---------
-------------- ----------------- - ---------------------
---
------在上面的示例中，我们将原来的 title 属性映射为 myTitle 属性，然后通过已有的属性，计算出 myDescription 属性值。
validate
使用 validate 方法可以对属性值进行预处理。当属性值不符合设定条件时，将会抛出异常：
propPipe(props)
.validate('id', id => id > 0, 'id 必须大于 0')
.validate('title', title => title !== '', 'title 不能为空')
.value在上面的示例中，我们先对 id 进行预处理，要求其必须大于 0，否则会抛出异常，同理，对 title 进行预处理时，要求其不为空。
示例
下面是一个使用 react-prop-pipe 的组件示例，我们将 title 属性转为大写字母，将 description 和 age 属性映射并计算出新的 description 属性值：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------------
----- ----------- - ----- -- -
----- -------- - ---------------
----------- -- --
---------
------ -------------------------
---
-------------
--------------- --------------
------ -----
--
----------- -- --
---------
--------------- ------------------------- -------------- ----- -----
---
------
------ -
-----
-------------------------
--------------------------------
------
-
-
------ ------- -----------总结
通过本文的学习，我们可以更好地应用 react-prop-pipe 对 React 应用中的属性进行处理。它提供了丰富的 API，使我们能够方便地进行属性的传送、变换与校验，并且支持链式调用。同时，我们在实际使用中也要注意传入的 props，以避免出现异常情况。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055caf81e8991b448da134