React.js内联样式最佳实践
发布于 1 年前 作者 JavaBird 1205 次浏览 来自 问答

问题

通常在 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>;
  }
});

这样定义很不灵活,总不能在每个类里面都这样定义吧?有没有其它好的办法呢?

简答

目前还没有形成一个统一的 ‘最佳实践方案’ ,内联样式依然是很普遍的。

这里有一些不同的使用方法,供参考:React inline-style lib comparison chart

Style 一般包含如下的概念:

  • 布局——组件与组件之间如何关联
  • 外观——组件本身的样式设计
  • 行为和状态——元素在特定状态的展示

根据 state 状态变化的样式: React已经在管理组件的状态,这使得状态和行为的风格很自然地适合与组件逻辑进行托管。 可以考虑直接添加状态样式,而不是构建使用条件状态类进行渲染的组件。

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

// 内联样式
<li className='todo-list__item' style={(item.complete) ? styles.complete : {}} />

请注意,我们使用一个类来表示外观,但不再使用任何 .is- 前缀类来表示状态和行为。 我们可以使用 Object.assign(ES6)_.extend(下划线/ lodash) 来添加对多个状态的支持:

// 支持多状态内联样式
<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)}>

布局

一般不要将布局样式直接添加到组件中,用布局组件包装你的组件。代码如下:

// 不推荐
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// 推荐
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

对于布局支持,经常将组件设计为100%的宽度和高度。

表现形式

这是“inline-style”辩论中最具有争议的地方。 最终,它取决于您的设计组件以及团队 javascript 的掌控能力。 有一件事是肯定的,你需要一些类库的帮助。 浏览器状态(:悬停,焦点)和媒体查询在原始 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>
  }
});

原文连接:https://stackoverflow.com/questions/26882177/react-js-inline-style-best-practices

回到顶部