React.js内联样式最佳实践
我知道你可以在React类中指定样式，如下所示：
var MyDiv = React.createClass({
render: function() {
var style = {
color: 'white',
fontSize: 200
};
return <div style={style}> Have a good and productive day! </div>;
}
});
我是否应该以这种方式做所有样式，并且没有CSS文件中指定的样式？
还是应该完全避免内联样式？
做一点点两者似乎很奇怪和混乱 - 调整样式时需要检查两个地方。
目前还没有很多“最佳实践”。 我们那些使用内联样式的React组件，仍然是非常多的实验。
有许多方法有很大不同：反应内联样式的lib比较图表
全部还是全无？
我们所说的“风格”其实包含了很多概念：
从状态样式开始
React已经在管理组件的状态，这使得状态和行为的风格很自然地适合与组件逻辑进行托管。
可以考虑直接添加状态样式，而不是构建使用条件状态类进行渲染的组件。
// 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 : {}} />
请注意，我们使用一个类来表示外观，但不再使用任何.is-前缀类来表示状态和行为 。
我们可以使用Object.assign （ES6）或_.extend （下划线/ lodash）来添加对多个状态的支持：
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
定制和可重用性
现在我们使用Object.assign ，使得我们的组件可以以不同的样式重用。 如果我们想要覆盖默认样式，我们可以在带有道具的调用站点上这样做： <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>
对于布局支持，我经常尝试将组件设计为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函数来计算样式：
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上更详细地讨论了所有这些：Inline Styles以及何时最好“仅使用CSS”。
我很乐意帮助你，一路上发现新的发现:)打我 - > @chantastic
React中的style属性期望值是一个对象，即Key值对。
style = {}里面会有另外一个对象，例如{float:'right'}来使它工作。
<span style={{float:'right'}}>{'Download Audit'}</span>
希望这能解决问题
我在我的React组件中广泛使用内联样式。 我发现在组件中共置样式更清晰，因为它始终清楚组件的样式和不具备的样式。 另外，拥有Javascript的全部功能真的可以简化更复杂的样式需求。
我一开始并不相信，但在涉足了几个月之后，我完全转换了，正在将所有CSS转换为内联或其他JS驱动的css方法。
Facebook员工和React贡献者“vjeux”的演示文稿也非常有用 - https://speakerdeck.com/vjeux/react-css-in-js
链接地址: http://www.djcxy.com/p/88163.html