随着前端开发的不断发展，我们通常会有一个前端组件库，这样可以提高效率、降低重复工作，减少出错的机会。在组件库中，我们经常使用到许多的 props，但是某些 props 并不需要传递到子组件，这时候我们就需要使用一个轮子 -- @pluralsight/ps-design-system-filter-react-props。
@pluralsight/ps-design-system-filter-react-props
@pluralsight/ps-design-system-filter-react-props是一个能够过滤掉不应该向子组件传递的props的npm包。该npm包由 Pluralsight 设计系统提供，并且集成了 TypeScript 类型定义，可以帮助前端开发工程师更好地管理props。
安装
使用npm或yarn安装@pluralsight/ps-design-system-filter-react-props：
npm install --save @pluralsight/ps-design-system-filter-react-props # 或者 yarn add @pluralsight/ps-design-system-filter-react-props
使用教程
基本使用
假如你需要使用一个组件，并且不希望子组件接收到某些props，你可以通过以下方式使用该 npm 包：
-- -------------------- ---- -------
------ ---------------- ---- ---------------------------------------------------
-------- ------------------ -
----- - ------ ----- -------- ------- - - ------------------------
------ -
-- ------- ------ ----- -------
---- -------- ------ --------- ---- -- ----------
----------------------
------
--
-这里使用了ES6的析构赋值，其中 color, size, variant 是可以传递到子组件的，而剩下的 rest 参数被过滤掉了。
Props 校验
在 TypeScript 项目中使用了 @pluralsight/ps-design-system-filter-react-props 后，您还可以使用PropsFilter接口来类型校验传递给组件的props。下面的示例代码演示了如何使用:
-- -------------------- ---- -------
------ ----------------- -
-----------
- ---- ---------------------------------------------------
--------- ---------------- ------- ------------------ ----------------- -
-----------
------ -------
----- -------
-
-------- ------------------ ----------------- -
----- - ------ ----- -------- ------- - - ------------------------
------ -
---- -------- ------ --------- ---- -- ----------
----------------------
------
--
-通过使用 PropsFilter，我们可以确保我们的自定义 color, size props 能够成功传递到 MyComponent 组件中，而进行了过滤的 props 不能被传递。
结论
@pluralsight/ps-design-system-filter-react-props 提供了一个轻松的方式来过滤React props，使得开发人员不需要担心子组件正在使用的 props，帮助构建更安全的组件。有了此功能，我们可以更加专注于组件的开发，更加有效地利用我们的时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f793f687116197505561b20