目前还没有太多的"最佳实践".对于Reaction组件,我们中使用内联样式的人还在进行大量的实验.
有很多不同的方法:React inline-style lib comparison chart种
全要还是什么都不要?
我们所说的"风格",其实包括很多概念:
- 布局-how an element/component looks in relationship to others
- 外观-the characteristics of an element/component
- 行为和状态-how an element/component looks in a given state
从国家风格开始
Reaction已经在管理您的组件的状态,这使得state and behavior的样式非常适合与您的组件逻辑放在一起.
不要使用条件状态类来构造组件,而是考虑直接添加状态样式:
// 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 : {}} />
注意,我们正在使用一个类来设置appearance的样式,但是不再使用任何.is-
前缀的类来表示state and behavior.
我们可以使用Object.assign
(ES6)或_.extend
(下划线/加斜线)添加对多个状态的支持:
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
定制和可重用性
现在我们使用的是Object.assign
,使我们的组件能够以不同的样式重用变得非常简单.如果我们想覆盖默认样式,可以在调用点使用props 进行覆盖,如下所示:<TodoItem dueStyle={ fontWeight: "bold" } />
.实现方式如下:
<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>
布局
就我个人而言,我看不出内联布局样式有什么令人信服的理由.现在有很多很棒的CSS布局系统.我只用一个就行了.
也就是说,不要将布局样式直接添加到组件.用布局组件包装组件.这里有一个例子.
// 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>
对于布局支持,我经常try 将组件设计为100%
width
和height
.
外貌
这是"内联式"辩论中最具争议性的领域.归根结底,这取决于您设计的组件和您的团队对JavaScript的满意程度.
有一点是肯定的,你将需要图书馆的帮助.浏览器状态(:hover
、:focus
)和媒体查询在原始react 中是痛苦的.
我喜欢Radium,因为那些难的部分的语法是为模拟sass而设计的.
代码组织
通常,您会在模块外看到样式对象.对于待办事项列表组件,它可能如下所示:
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
getter函数
向模板中添加一堆样式逻辑可能会有点混乱(如上所示).我喜欢创建getter函数来计算样式:
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 "(Reaction Europe)上更详细地讨论了所有这些问题:Inline Styles and when it's best to 'just use CSS'个.
I'm happy to help as you make new discoveries along the way :) Hit me up -> @chantastic