前端开发中，我们经常需要将组件间的传值进行转换和组合，而 @rq/react-map-props 就是一个优秀的 npm 包，可以轻松地进行属性映射和组合。本文将会介绍如何使用这个包，并通过实例代码详解其使用方法及与原生代码的异同。
安装
使用 npm 安装 @rq/react-map-props：
$ npm install --save @rq/react-map-props
基本用法
@rq/react-map-props 主要有两个 API：
mapProps()compose()
mapProps()
mapProps() 接收两个参数：一个映射函数（mapPropsFn）和一个 React component（Component）。它会返回一个 mapping HOC（Higher-Order Component） 的函数，调用该函数并传入原组件，可以将需要映射的属性传入新组件中。
-- -------------------- ---- ------- ------ -------- ---- ---------------------- ----- --------------- - -------------- -- -- --------- ------------ ---------- -- --------------- ---- -- ------ ----- ----------- - ------------------------------- -- - -------------------------- --- ------------ ----------- --- -- ----------------- ------------ --------------- --- -- -----------------
尽管可以自己手写高阶组件，使用 mapProps() 非常方便，现在我们通过一个简单的例子来展现其便利性。
compose()
compose() 接收任意数量的函数作为参数，它会返回一个从右到左依次组合运行的复合函数。这个 API 的一个常见场景是用于组合 HOC。
-- -------------------- ---- -------
------ -------- ---- ----------------------
----- --------------- - --------- --
-------------- -- --
---------
------------ ---------- -- ---------------
---------------
----- ------------------------- - --------- --
-------------- -- --
---------
------------ --------------------------------
---------------
----- ----------- - --------
----------------
--------------------------
----------------- -- ----------------------------
------------ ----------- --- -- -----------------
------------ --------------- --- -- -----------------由于 mapProps() 返回的是一个 HOC ，你可以很容易地将其与其他 HOC 组合起来。例如，我们将 vanilla-extract、react-redux、react-router 等其他 HOC 组合在一起使用。
至此，我们已经介绍了 @rq/react-map-props 的基本用法。下面我们进一步学习有关这个 npm 包的进阶使用方法。
进阶用法
@rq/react-map-props 的组合式 API 相当强大，提供了许多进阶用法，包括自动跳过无效输入、自定义排序、将输入映射到多个输出等等。
1. 跳过无效输入
在功能上，mapProps() 等效于 lodash 的 flow() 和 lodash/fp 的 pipe()。但内容上，mapProps() 可以更加智能地处理传入的空值和 undefined 值。
例如，当我们使用 flow() 时，它会返回 NaN，因为中间步骤会将输入 undefined 值转换为空字符串。
const getNameFirstInitialUsingFlow = flow(
prop('firstName'),
getFirstCharacter,
);
getNameFirstInitialUsingFlow({firstName: undefined}); // NaN而在 mapProps() 中，如果某个输入为 undefined，该值将自动跳过，输出结果为空字符串。
const getNameFirstInitialUsingMapProps = mapProps(
({firstName}) => getFirstCharacter(firstName),
);
getNameFirstInitialUsingMapProps({firstName: undefined}); // ''2. 自定义排序
compose() 的 API 允许您进行操作，并将结果按照自定义的顺序返回，也就是将输出排序。例如，在以下示例中，我们可以使用 mapProps() 操作重新序列化对象的数据，然后使用 compose() 操作将更改的结果按照想要的顺序传出。
-- -------------------- ---- -------
------ ------- ---- ------------------- -- ------ --- --------- --
----- ------------------ - ----------------- -- --
--------
----------- -------------------------------
----
----- ------------------ - -------------- -- --
---------
------------- --------
----
----- ------------ - -------------- -- --
---------
--------- ----------------------------
----
----- ---------------- - --------
-------------------
-------------------
------------
---- ------------- ----------- --------- ------- -- -- -
------ -
----------
- ------- -
-------------- ------------ -
------------ ---------- -
---------- -------- -
--
--
---
----------------- ------- ------ ----------- ----------- ----------- - -------- --- --------- -- - -- --这里的例子非常简单：我们通过按照逆序排序原始输入值，重新序列化嵌套数据，并添加一个新属性（"additionalData"）来更改了传入的数据结构。
3. 将输入映射到多个输出
除了基本类型映射外，也可以用 mapProps() 映射对象，列表等其他类型的变量。mapProps() 同样也能够处理将输入映射到多个输出的情况。
例如，假设我们有一个数据格式为 { foo: { bar: "my bar" } } 的数据结构，并且希望将其映射为 { fooBar: "my bar" }。可以使用 mapProps() API 抽取并传递所需的属性。
-- -------------------- ---- -------
----- ---------- - -
---- -
---- --- ----
-
--
----- ------------------- - ----------- --- -- -- --
------- -------
---------------
-------------------- ----- -------------- - --这个例子同样适用于大量列表数据，它们可能需要进行一些组合成小的列表项数据的操作，可以用 mapProps() API 处理。
总结
@rq/react-map-props 是一个非常方便的 npm 包，它通过提供两个 API mapProps() 和 compose() 来轻松地进行属性映射和组合。除了基本用法外，@rq/react-map-props 还提供了许多精细和优秀的用法，例如自动跳过无效输入、自定义排序、将输入映射到多个输出等等。我们应该根据自己的实际开发需求来运用这个 npm 包，从而更加高效地完成前端开发的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4d51ab1864dac66812