3.8 React Props默认值

前面的React Props均是应用在React函数组件中的，这个自然也很好理解，因为定义JavaScript函数时是支持带参数的。那么问题就来了，在使用React类组件时如何使用React Props参数呢？

React框架为类组件定义了一个默认Props—defaultProps，使用defaultProps默认值来实现React Props应用。下面看一个defaultProps默认值的代码实例：

【代码3-9】（详见源代码目录ch03-react-props-defaultProps.html文件）

关于【代码3-9】的说明：

●第18~22行代码定义了一个React类组件（PropsReactComp），其中第20行代码中使用到了props参数（{this.props.default}）。读者一定注意到了，在声明类（PropsReactComp）的过程中明明没有定义props参数，那么这里如何使用React Props的呢？

●关键是第24~26行代码的定义，通过defaultProps默认值为React类组件（PropsReactComp）定义了一个“default”属性（属性值为"defaultProps"）。这里定义好defaultProps默认值后，就可以像第20行代码那样（{this.props.default}）使用React Props了。

测试网页的效果如图3.7所示。如图中的箭头所示，通过defaultProps为Props设定默认值，可以为React类组件实现React Props应用。

图3.7 React Props默认值