当我们开发一个组件化的应用程序时，难免会遇到这样的场景：组件需要一些必要的属性，如果没有这些属性，组件将无法正常工作或者无法达到预期的效果。而手写验证这些属性是否存在等逻辑时，是一件比较繁琐的事情，因此我们需要一个工具来协助我们检查这些属性的存在。方便我们快速定位问题，这个工具就是auto-prop-component。
auto-prop-component是npm上的一个轻量级的组件库，封装了强制属性检查方法，用于检查组件的必要属性是否齐全。它提供了一个API可以通过props定义组件需要的属性，使用时只需添加到组件中即可。
安装
使用NPM命令行工具安装auto-prop-component：
--- ------- ------------------- ------
如何使用
auto-prop-component提供了一个高阶组件，在组件定义时添加它即可实现指定属性的强制校验。
下面是一个简单的例子：
------ ----- ---- --------
------ -------- ---- ----------------------
----- ----------- ------- --------------- -
-------- -
------ ---------- -----------------------
-
-
------ ------- --------------------- -
----- -----------------
---autoProp包装了MyComponent组件，检查是否存在属性name，如果未传值或传的是undefined就会抛出console.error错误。
auto-prop-component API
autoProp接受两个参数：
------------------- ----------
Component: 要包装的组件。可以是class，stateless function（无状态函数），或者是任何通过React.createElement ()创建的组件。propTypes: 需要传递给组件的props，可以通过PropTypes的引用或者对象直接定义。
auto-prop-component 提示和用法
- autoProp尽量使用在顶层的组件中，你无法保证使用autoProp的父子组件都会传递正确的props， 因为autoProp内部依赖于React.PropTypes以及其它prop-types库。
- autoProp不会验证嵌套属性，如this.props.user.name。必须在内部组件中定义propTypes来实现此功能。
- autoProp检查组件的prop是否足够，但并不验证prop的类型，如果想要验证类型，请使用其它的propTypes工具
- 因为autoProp添加了一个高阶组件，所以如果你使用了它，React开发者工具的组件树中会多一层高阶组件标记。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/93874