React.js内联样式最佳做法

Question

我知道您可以在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文件中完全没有指定任何样式？

还是应该完全避免使用内联样式？

两者兼而有之，似乎很奇怪而且很乱-在调整样式时需要检查两个位置。

Answer 1

目前还没有很多“最佳实践”。我们中那些使用内联样式作为React组件的人仍在进行大量试验。

全部还是全部？

我们所称的“样式”实际上包括许多概念：

• 布局- 元素/组件与其他对象的关系外观
• 外观- 元素/组件的特征
• 行为和状态- 元素/组件在给定状态下的外观

从状态样式开始

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（下划线/破折号）添加对多个状态的支持：

// 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>

为了获得布局支持，我经常尝试将组件设计为100% widthand 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>
  }
});