一、写好一个通用的 React 组件 之 props

Step-1

在非  TypeScript 环境下，实际上 React 组件中的 props 属性，数据使用非常随意。我们看到的大部分代码是长这样的：

直接从 props 中解构指定字段。

Step-2

对于实现特定业务功能的组件，这样写无可厚非。但是无论是从代码的健壮性还是代码风格来说，这都算不上“好代码”。

尤其对于上述代码中的 onSure 字段来说，一旦后续的开发者传递错了数据类型，很容易造成程序意外中断。

因此，最起码的建议是，将类似的代码写成如下的形式：

对于复杂类型通过 typeof 校验合法性。

Step-3

对于一般的业务代码，总的来说已经够了。但是对于通用性更高、复用更复杂的功能组件，通常 props 中的属性会更多。如果每项属性在使用中都如此检测，也未必过于繁琐。因此，建议通过 React 中拆分出来的 prop-types 模块配合 JS Class 中的两项静态属性 defaultProps 和 propTypes ，代替繁琐的使用检测。

关于 props-types 的详细用法可以参考官方文档。https://www.npmjs.com/package/prop-types

defaultProps 和 propTypes 两者配合，唯一需要注意的是对于 isRequired 标记的属性，不再也不应该提供 defaultProps。