Reactjs 的 PropTypes 使用方法

propTypes 使用來規範元件Props的型別與必需狀態

var Test = React.createClass({ propTypes: { // required requiredFunc: React.PropTypes.func.isRequired, requiredAny: React.PropTypes.any.isRequired, // primitives, optional by default bool: React.PropTypes.bool, func: React.PropTypes.func, number: React.PropTypes.number, string: React.PropTypes.string, }, render:function(){ return <div/> } }); var component = React.render( <Test requiredFunc="bar" bool="true" requiredAny="a"/>, document.body ); 

若沒有按照規範，會顯示警告

 

線上測試：http://jsbin.com/suweke/3/edit

React.PropTypes 的種類

React.PropTypes.array           // 陣列 React.PropTypes.bool.isRequired // Boolean 且必要。 React.PropTypes.func // 函式 React.PropTypes.number // 數字 React.PropTypes.object // 物件 React.PropTypes.string // 字串 React.PropTypes.node // 任何類型的: numbers, strings, elements 或者任何這種類型的陣列 React.PropTypes.element // React 元素 React.PropTypes.instanceOf(XXX) // 某種XXX類別的實體 React.PropTypes.oneOf(['foo', 'bar']) // 其中一個字串 React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 其中一種格式類型 React.PropTypes.arrayOf(React.PropTypes.string) // 某種類型的陣列(字串類型) React.PropTypes.objectOf(React.PropTypes.string) // 具有某種屬性類型的物件(字串類型) React.PropTypes.shape({ // 是否符合指定格式的物件 color: React.PropTypes.string, fontSize: React.PropTypes.number }); React.PropTypes.any.isRequired // 可以是任何格式，且必要。 // 自定義格式(當不符合的時候，會顯示Error) // 不要用`console.warn` 或者 throw, 因为它在`oneOfType` 的情况下無效。 customPropType: function(props, propName, componentName) { if (!/^[0-9]/.test(props[propName])) { return new Error('Validation failed!'); } } 

getDefaultProps

當父元件沒有提供props的屬性時，可以採用getDefaultProps，預設props屬性的方式，讓元件使用預設的設定值，確保有props帶入。

var ComponentWithDefaultProps = React.createClass({ getDefaultProps : function () { return { value : 'default value' }; }, /* ... */ });

转载于:https://www.cnblogs.com/liuna/p/6073583.html