react里面 内联css样式怎么样_React.js内联样式最佳实践

目前还没有很多“最佳实践”。对于React组件，我们这些使用内联样式的人仍然在进行实验。

有许多方法变化很大：React内联样式的lib比较图表

全有或全无？

我们所谓的“风格”实际上包含了很多概念：

布局 - 元素/组件与其他元素的关系

外观 - 元素/组件的特征

行为和状态 - 元素/组件在给定状态下的外观

从状态样式开始

React已经在管理组件的状态，这使得状态和行为的样式自然适合与组件逻辑进行共置。

不要使用条件状态类构建要呈现的组件，而是考虑直接添加状态样式：

// Typical component with state-classes

className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />

// Using inline-styles for state

style={(item.complete) ? styles.complete : {}} />

请注意，我们使用类来设置外观样式，但不再使用任何带.is-前缀的类来处理状态和行为。

我们可以使用Object.assign(ES6)或_.extend(下划线/ lodash)来添加对多个状态的支持：

// Supporting multiple-states with inline-styles

style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

定制和可重用性

现在我们正在使用Object.assign它变得非常简单，使我们的组件可以重复使用不同的样式。如果我们想要覆盖默认样式，我们可以在带有props的调用站点上这样做，如下所示：。像这样实现：

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

className="col-xs-12 col-sm-6 col-md-8"

firstName="Michael"

lastName="Chan" />

// This is much easier to maintain and change

firstName="Michael"

lastName="Chan" />

对于布局支持，我经常尝试将组件设计为100% width和height。

出现

这是“内联式”辩论中最具争议的领域。最终，它取决于您的设计组件以及使用JavaScript的团队的舒适度。

有一件事是肯定的，你需要图书馆的协助。浏览器状态(:hover，:focus)和媒体查询在原始React中很痛苦。

我喜欢Radium，因为这些硬件的语法设计用于模拟SASS的语法。

代码组织

通常，您会在模块外部看到样式对象。对于todo-list组件，它可能看起来像这样：

var styles = {

root: {

display: "block"

},

item: {

color: "black"

complete: {

textDecoration: "line-through"

},

due: {

color: "red"

}

},

}

吸气功能

在模板中添加一堆样式逻辑可能会有点混乱(如上所示)。我喜欢创建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

{this.props.item}

}

});

进一步观看

我在今年早些时候在React Europe上更详细地讨论了所有这些：内联样式以及何时最好'只使用CSS'。

我很乐意帮助您沿途创造新的发现:)打我 - > @chantastic