在React中繼承超類的defaultProps

我認爲一些props（例如，主題）在組件中非常普遍，因此將它們的處理（對超類）進行提取是有意義的。然後，它們的默認值也屬於那裏。在React中繼承超類的defaultProps

但是，在React中實現這一點的獨特方式是什麼？

class Base extends React.Component { 
    bgColor() { 
    switch (this.props.theme) { 
     case 'Summer': return 'yellow'; break; 
     case 'Autumn': return 'grey'; break; 
     case 'Winter': return 'white'; break; 
    } 
    } 
} 
Base.defaultProps = { 
    theme: 'autumn' 
};

class Sky extends Base { 
    render() { 
    return <div style={{backgroundColor: this.bgColor()}}>{this.props.clouds}</div>; 
    } 
} 
Sky.defaultProps = { 
    clouds: [] 
};

... defaultProps是類屬性（相對於實例），並沒有繼承。

來源

2015-06-04 Peter V

如果你正在尋找一個純粹的陣營爲基礎的解決方案，你有沒有考慮設置任何接收道具組件的狀態，並使用'getInitialState'如果沒有收到任何道具指定默認值？ –

嗯，是的，但我認爲它不屬於'state'，因爲它不會改變 –

在這種情況下，您可以在'bgColor（）'中指定默認值。如果'this.props.theme == null'然後返回''grey''，否則使用你已經擁有的switch語句。我知道這不像使用默認道具的超類那麼優雅，但我相信這仍然可行。 –

通過指定Sky.defaultProps隱藏基本的。如果你想合併它們，你需要明確地做到這一點，例如

Sky.defaultProps = Object.assign({}, Base.defaultProps, { 
    clouds: [] 
});

來源

2015-06-04 14:45:01 loganfsmyth

謝謝，看起來這是正確的方法，但是，根據kangax的ES6兼容性表，'JSX'中還不支持'Object.assign'。 –

既然你在使用類，我給了一個標準的ES6答案，假設你使用的是Babel。你可以總是使用'_.extend'或者自己填充它。 – loganfsmyth

我正在研究'es6-shim'，但後來偶然發現了'React .__ spread'。使用它是不是一個好主意？ –

在React中繼承超類的defaultProps

回答

相關問題