8

staticES7 では、プロパティとメソッド定義の概念が導入されています。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ます。代わりに、propTypesand defaultPropson は 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);
}

これをよりきれいに/再利用可能にする他の方法はありますか?

4

2 に答える 2