static
ES7 では、プロパティとメソッド定義の概念が導入されています。ES7 対応のトランスパイラーとともに、これらを React で使用しprops
て、次のようにバリデーターとデフォルトを指定できます。
export default class ComponentOne extends React.Component {
static propTypes = {
foo: React.PropTypes.string
}
static defaultProps = {
foo: 'bar'
}
// ...
}
これは非常に便利ですが、サブクラスが登場すると扱いにくくなります。たとえば、次のモジュールがComponentOne
上記と同じコードベースに追加されたとします。
export default class ComponentTwo extends ComponentOne {
static propTypes = {
baz: React.PropTypes.number
}
static defaultProps = {
baz: 42
}
// ...
}
ComponentTwo
プロパティバリデーターとそのスーパークラスのデフォルトを「継承」したいと思いComponentOne
ます。代わりに、propTypes
and defaultProps
on は onComponentTwo
のものをシャドウしComponentOne
、React は on で定義されたものを捨てComponentOne
ます。
super
は現在のクラスのプロトタイプへの参照であり、プロトタイプから直接ぶら下がった値を参照することになっているためstatic
、これでうまくいくと思いました。
import _ from 'lodash';
export default class ComponentTwo extends ComponentOne {
static propTypes = _.merge(super.propTypes, {
baz: React.PropTypes.number
});
}
ただし、これはおそらく Babel: からのエラーを生成しますParsing error: 'super' outside of function or class
。
これは動作しますが、あまり移植性がありません:
export default class ComponentTwo extends ComponentOne {
static propTypes = Object.assign({
baz: React.PropTypes.number
}, ComponentOne.propTypes);
}
これをよりきれいに/再利用可能にする他の方法はありますか?