公式のReact.jsライブラリドキュメントのAdvanced Guidesセクションの一連の翻訳の継続。
PropTypes-Reactでの型チェック
アプリケーションが大きくなると、多数のタイプチェックエラーが発生する可能性があります。 一部のアプリケーションでは、 FlowやTypeScriptなどのJavaScript拡張機能を使用して、アプリケーション全体を型チェックできます。 ただし、使用しない場合、Reactは組み込みの型チェック機能を提供します。
コンポーネントのコンポーネントタイプチェック（props）を実行するには、コンポーネントクラスの特別なプロパティpropTypes
定義できます。
class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: React.PropTypes.string };
React.PropTypes
モジュールは、受信したデータの検証に使用できるバリデーターのセットをエクスポートします。 この例では、 React.PropTypes.string
バリデーターを使用します。 無効な値がプロパティに渡されると、JavaScriptコンソールに警告が表示されます。 パフォーマンスのために、 propTypes
は開発モードでのみチェックされます。
React.PropTypes
この例では、サポートされているさまざまなバリデーターが実装されています。
MyComponent.propTypes = { // , JavaScript . // , . // . optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, // -, React (): , , /, // . optionalNode: React.PropTypes.node, // React. optionalElement: React.PropTypes.element, // , . // JavaScript instanceof. optionalMessage: React.PropTypes.instanceOf(Message), // . optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), // . optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // , . optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // , . optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // , // ( ). optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // . `React.PropTypes.func` , // . // `.isRequired` . // `.isRequired` . requiredFunc: React.PropTypes.func.isRequired, // requiredAny: React.PropTypes.any.isRequired, // . Error . // `console.warn` `throw`, .. `oneOfType`. customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( 'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }, // `arrayOf` `objectOf`. // Error . // . // - , // . customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( 'Invalid prop `' + propFullName + '` supplied to' + ' `' + componentName + '`. Validation failed.' ); } }) };
単一の子制約
React.PropTypes.element
を使用してReact.PropTypes.element
1つの子のみをコンポーネントに渡すことができるという制限を課すことができます。
class MyComponent extends React.Component { render() { // props.children . const children = this.props.children; return ( <div> {children} </div> ); } } MyComponent.propTypes = { children: React.PropTypes.element.isRequired };
デフォルトのプロパティ値
コンポーネントクラスの特別なプロパティdefaultProps
定義することprops
、 props
デフォルト値を定義できます。
class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } // props: Greeting.defaultProps = { name: 'Stranger' }; // "Hello, Stranger": ReactDOM.render( <Greeting />, document.getElementById('example') );
この例では、JSXコンポーネントで定義されていない場合、 defaultProps
値を使用してthis.props.name
を設定します。 propTypes
型検証はpropTypes
から値を設定した後に実行されるため、 defaultProps
から値を設定する場合にも型チェックが適用されます。
次の部分：
前の部分：
ソース： React-上級ガイド-PropTypesによる型チェック