注意: React.PropTypes 已經廢棄, 請使用 prop-types 庫來代替.

隨著應用日漸龐大,我們可以通過型別檢查捕獲大量錯誤. 對於某些應用來說,你還可以使用 Flow 或 TypeScript 這樣的 JS 擴充套件來對整個應用程式進行型別檢查. 然而即使不用他們, React 也有一些內建的型別檢查功能. 要檢查元件的屬性,需要配置特殊的 propTypes 屬性:

import PropTypes from 'prop-types';
class Greeting extends React.Component {
	render () {
		return (
			<h1> Hello , { this.props.name } </h1>
		)
	}
 }
 Greeting.propTypes = {
	name: PropTypes.string
}
 

PropTypes 包含一整套驗證器,可用於確保你接收的資料是有有效的. 在上面例項中, 我們使用了 PropTypes.string. 當你給屬性傳遞無效值時, JS 控制檯將會列印警告, 處於效能原因, propTypes 只在開發模式下進行檢查.

• 可以將屬性宣告為JS原生型別 (array, bool, func, number,object, string, symbol )
• 任何可被渲染的元素 (包括shu子,字串, 子元素或陣列
• 一個 React 元素
• 也可以宣告屬性為某個類的例項, 這裡使用 JS 的 instanceof 操作符實現.
• 也可以限制屬性值是某個特定值之一.
• 限制他為列舉型別之一的物件
• 一個指定元素型別的陣列. PropTypes.arrayOf(PropTypes.number)
• 一個指定型別的物件
• 一個指定屬性及其型別的物件
• 也可以在任何 PropTypes 屬性後面加上 ‘isRequired’ 字尾,這樣如果這個屬性父元件沒有提供,會列印警告資訊.
• 任何型別的資料
• 也可以指定一個自定義驗證器. 他應該在驗證失敗時返回一個 Error 物件而不是 console.warn 或丟擲異常. 不過在 oneOfTyep 中他不起作用
• 不過你可以提供一個自定義的 arrayOf 或 objectOf 驗證器, 他應該在驗證失敗時返回一個 Error物件. 他被用於驗證陣列或物件的每個值
  . 驗證器前兩個引數的第一個是陣列或物件背身,第二個是他們對應的鍵

限制單個子代: 使用 PropTypes.element 可以指定只傳遞一個子代. 屬性預設值: 可以通過配置 defaultProps 為 props 定義預設值.

class Greeting extends React.Component {
	render () {
		return ( 
   				<h1> hello {this.props.name} </h1>
       )
	}
}
//為屬性指定預設值
Greeting.defaultProps = {
	name: 'Stranger'
}