Reactjs-props-validation
提供:Dev Guides
ReactJS-小道具の検証
プロパティの検証は、コンポーネントの正しい使用を強制する便利な方法です。 これは、アプリが大きくなると、開発中に将来のバグや問題を回避するのに役立ちます。 また、各コンポーネントの使用方法を確認できるため、コードが読みやすくなります。
小道具の検証
この例では、必要なすべての props で App コンポーネントを作成しています。 App.propTypes は、小道具の検証に使用されます。 一部のプロップが割り当てた正しいタイプを使用していない場合、コンソールの警告が表示されます。 検証パターンを指定したら、 App.defaultProps を設定します。
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h3>Array: {this.props.propArray}</h3>
<h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
<h3>Func: {this.props.propFunc(3)}</h3>
<h3>Number: {this.props.propNumber}</h3>
<h3>String: {this.props.propString}</h3>
<h3>Object: {this.props.propObject.objectName1}</h3>
<h3>Object: {this.props.propObject.objectName2}</h3>
<h3>Object: {this.props.propObject.objectName3}</h3>
</div>
);
}
}
App.propTypes = {
propArray: React.PropTypes.array.isRequired,
propBool: React.PropTypes.bool.isRequired,
propFunc: React.PropTypes.func,
propNumber: React.PropTypes.number,
propString: React.PropTypes.string,
propObject: React.PropTypes.object
}
App.defaultProps = {
propArray: [1,2,3,4,5],
propBool: true,
propFunc: function(e){return e},
propNumber: 1,
propString: "String value...",
propObject: {
objectName1:"objectValue1",
objectName2: "objectValue2",
objectName3: "objectValue3"
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));