React.js内联样式最佳做法

  • Z时代
  • 2024-01-10
  • 分类：问答

我知道您可以在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组件的人仍在进行大量试验。

回答：

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

  • 布局- 元素/组件与其他对象的关系外观

  • 外观- 元素/组件的特征

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

回答：

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>
  }
});

以上是 React.js内联样式最佳做法 的全部内容， 来源链接： utcz.com/qa/411464.html

回到顶部