reactのタイプチェック(PropTypes)
1785 ワード
タイプチェックの際には、コンポーネントに必要でないデータタイプが入るのを避けるため、不必要なバグが発生します.以下はPropTypesを勉強する時のメモです.
宣言はjsタイプです
一つの機能を使って検証器をカスタマイズできます. これはErrerのobjectタイプのエラーを返します.チェックが失敗した時に. 以下のとおりです
宣言はjsタイプです
optionalArray: PropTypes.array,//
optionalBool: PropTypes.bool,//
optionalFunc: PropTypes.func,//function
optionalNumber: PropTypes.number,//
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
は、任意のレンダーのタイプとして宣言することができます.optionalElement: PropTypes.element,
は、あるクラスの実例として宣言しています.optionalMessage: PropTypes.instanceOf(Message),
エニュメレート・限定optionalEnum: PropTypes.oneOf(['News', 'Photos'])
objectを使用して、複数のタイプに限定されます. optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
特定の配列タイプoptionalArrayOf: PropTypes.arrayOf(PropTypes.number),
特定のObjectタイプoptionalObjectOf: PropTypes.objectOf(PropTypes.number)
は、上述のすべての検証をisrequiredを使用して実施することができる.requiredFunc: PropTypes.func.isRequired,
functionを使用する一つの機能を使って検証器をカスタマイズできます. これはErrerのobjectタイプのエラーを返します.チェックが失敗した時に. 以下のとおりです
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
デフォルトのprops値を設定して使用します. コンポーネント.defaultProps={} の文法で来ました 例えば、以下のようにclass Greeting extends React.Component {
render() {
return (
Hello, {this.props.name}
);
}
}
Greeting.defaultProps = {
name: 'Stranger'
};