ReactJS プロップの確認

属性の検証は、コンポーネントの適切な使用を強制する効果的な方法です。これにより、アプリケーションが大きくなったときに将来のエラーや問題を避けることができます。また、コードの可読性も向上し、各コンポーネントがどのように使用されるべきかを確認できます。

プロパティの検証

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>
　　　　　　　　　　　　<h3Object:　{this.props.propObject.objectName}1}</h3>
　　　　　　　　　　　　<h3Object:　{this.props.propObject.objectName}2}</h3>
　　　　　　　　　　　　<h3Object:　{this.props.propObject.objectName}3}</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'));