覆蓋/擴展React.js中ES7類的靜態屬性

ES7引入了static屬性和方法定義的概念。隨着一個ES7能力transpiler，這些can be used in React指定驗證器和默認值props，像這樣：覆蓋/擴展React.js中ES7類的靜態屬性

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和defaultProps對ComponentTwo影子ComponentOne，和React拋出那些定義在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); 
}

是否有任何其他的方式來做到這一點更清潔/可再使用？

來源

2015-10-23 ericsoco

與靜態屬性繼承類時，請注意告誡的支持，但您可能會遇到更老的瀏覽器的問題注意：'__proto__'在IE <= 10不支持，所以靜態屬性不會被繼承。「來源：https：//babeljs.io/docs/advanced/caveats/ – Raspo

您是否嘗試過在構造函數中進行'super.propTypes'合併？ –

@Mat我還沒有，但考慮到'props'進入構造函數並且已經設置了默認值，我想這太遲了。 – ericsoco

奇怪的是，使用super適用於靜態方法。我認爲它也適用於靜態屬性。對我來說的話，感覺更自然的使用直接超類名稱：

export default class ComponentTwo extends ComponentOne { 
    static propTypes = _.merge({}, ComponentOne.propTypes, { 
    baz: React.PropTypes.number 
    }); 
}

但是，使用super，一個解決辦法，我可以使用靜態方法來初始化屬性想到的是，不幸的是將有手動調用：「如果你從一類，那麼靜態屬性是由它通過`__proto__`繼承繼承，這是廣：

class ComponentTwo extends ComponentOne { 
    static _init() { 
    this.propTypes = _.merge({}, super.propTypes, { 
     baz: React.PropTypes.number 
    }); 
    } 
} 
ComponentTwo._init();

來源

2015-12-14 00:43:12

這不僅僅是對我的文章結尾處的建議的重構嗎？使用'lodash'而不是'Object.assign'？我的問題是明確引用'ComponentOne'，而不是能夠引用「超級」類。這不是什麼大問題，因爲你必須在'extends'語句中引用它，但並不理想。 – ericsoco

是的，就是這樣，但是使用_merge_的正確方式。 –

還增加了另一種選擇，我認爲這更糟糕。 –

覆蓋/擴展React.js中ES7類的靜態屬性

回答

相關問題