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默認值