Props未指定の場合のデフォルト値の設定を行う場合に、便利な機能が用意されています。前回行ったデータ型の定義と同様に、連想配列(ハッシュ)を書いてあげるだけで実現できます。
コンストラクタでやれば良くね？というツッコミもありそうですがｗ Props未指定時に固定値を入れるだけのシンプルなケースの場合はスッキリかけるので便利だったりします。あとは決められた箇所にまとまっているとメンテナンス性も上がりますしね。
指定日までの日数を表示するComponent その3
前回のソースコードに、Propsのデフォルト値を設定するコードを追加しました。今回もこの機能はReact本体には含まれていないためライブラリ「prop-types」を追加している点にも注意してください。
これまでは以下のようにmessage属性を指定していましたが、今回はわざとこれを外しています。
ReactDOM.render(
<RemainTime date="2112-09-03 00:00:00" message="ドラえもん誕生" />,
document.getElementById('root')
);
サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>RemainTime</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 型定義とデフォルト値設定のためライブラリを追加 -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class RemainTime extends React.Component {
constructor(props) {
super(props);
this.state = {
now: new Date().getTime(),
target: new Date(props.date).getTime()
};
}
render() {
let remain = Math.floor( ( this.state.target - this.state.now ) / (1000 * 60 * 60 * 24) );
return <h1>{this.props.message}まで約{remain}日</h1>;
}
}
/**
* Propsの型定義
*/
RemainTime.propTypes = {
date: PropTypes.string,
message: PropTypes.string
};
/**
* Propsのデフォルト値
*/
RemainTime.defaultProps = {
message: "Xデー"
};
ReactDOM.render(
<RemainTime date="2112-09-03 00:00:00" />,
document.getElementById('root')
);
</script>
</body>
</html>
続きを読む
