👨🏼‍⚖️ 🎟️ 😍 PropTypes-Reactでの型チェック 🙎🏾 🤧 🔴

反応する高度なチュートリアル。パート2

公式の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から値を設定する場合にも型チェックが適用されます。

次の部分：

前の部分：

JSX-詳細。

ソース： React-上級ガイド-PropTypesによる型チェック

PropTypes-Reactでの型チェック