我知道你可以在React類中指定樣式，如下所示：var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; }});我是否應(yīng)該以這種方式做所有樣式，并且我的CSS文件中沒有指定任何樣式？或者我應(yīng)該完全避免使用內(nèi)聯(lián)樣式？做兩件事似乎很奇怪和混亂 - 在調(diào)整樣式時需要檢查兩個地方。
3 回答
拉風(fēng)的咖菲貓
TA貢獻1995條經(jīng)驗 獲得超2個贊
目前還沒有很多“最佳實踐”。對于React組件，我們這些使用內(nèi)聯(lián)樣式的人仍然在進行實驗。
有許多方法變化很大：React內(nèi)聯(lián)樣式的lib比較圖表
全有或全無？
我們所謂的“風(fēng)格”實際上包含了很多概念：
布局 - 元素/組件與其他元素的關(guān)系
外觀 - 元素/組件的特征
行為和狀態(tài) - 元素/組件在給定狀態(tài)下的外觀
從狀態(tài)樣式開始
React已經(jīng)在管理組件的狀態(tài)，這使得狀態(tài)和行為的樣式自然適合與組件邏輯進行共置。
不要使用條件狀態(tài)類構(gòu)建要呈現(xiàn)的組件，而是考慮直接添加狀態(tài)樣式：
// Typical component with state-classes
<li
className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />
// Using inline-styles for state
<li className='todo-list__item'
style={(item.complete) ? styles.complete : {}} />
請注意，我們使用類來設(shè)置外觀樣式，但不再使用任何帶.is-前綴的類來處理狀態(tài)和行為。
我們可以使用Object.assign（ES6）或_.extend（下劃線/ lodash）來添加對多個狀態(tài)的支持：
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
定制和可重用性
現(xiàn)在我們正在使用Object.assign它變得非常簡單，使我們的組件可以重復(fù)使用不同的樣式。如果我們想要覆蓋默認(rèn)樣式，我們可以在帶有props的調(diào)用站點上這樣做，如下所示：<TodoItem dueStyle={ fontWeight: "bold" } />。像這樣實現(xiàn)：
<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>
布局
就個人而言，我沒有看到內(nèi)聯(lián)布局樣式的令人信服的理由。有很多很棒的CSS布局系統(tǒng)。我只想用一個。
也就是說，不要直接向組件添加布局樣式。使用布局組件包裝組件。這是一個例子。
// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
className="col-xs-12 col-sm-6 col-md-8"
firstName="Michael"
lastName="Chan" />
// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
<UserBadge
firstName="Michael"
lastName="Chan" />
</div>
對于布局支持，我經(jīng)常嘗試將組件設(shè)計為100% width和height。
出現(xiàn)
這是“內(nèi)聯(lián)式”辯論中最具爭議的領(lǐng)域。最終，它取決于您的設(shè)計組件以及使用JavaScript的團隊的舒適度。
有一件事是肯定的，你需要圖書館的協(xié)助。瀏覽器狀態(tài)（:hover，:focus）和媒體查詢在原始React中很痛苦。
我喜歡Radium，因為這些硬件的語法設(shè)計用于模擬SASS的語法。
代碼組織
通常，您會在模塊外部看到樣式對象。對于todo-list組件，它可能看起來像這樣：
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
吸氣功能
在模板中添加一堆樣式邏輯可能會有點混亂（如上所示）。我喜歡創(chuàng)建getter函數(shù)來計算樣式：
React.createClass({
getStyles: function () {
return Object.assign(
{},
item.props.complete && styles.complete,
item.props.due && styles.due,
item.props.due && this.props.dueStyles
);
},
render: function () {
return <li style={this.getStyles()}>{this.props.item}</li>
}
});
進一步觀看
我在今年早些時候在React Europe上更詳細(xì)地討論了所有這些：內(nèi)聯(lián)樣式以及何時最好'只使用CSS'。
我很樂意幫助您沿途創(chuàng)造新的發(fā)現(xiàn):)打我 - > @chantastic
添加回答
舉報
0/150
提交
取消