React.js内联风格最佳实践[已关闭]

Question

我知道可以在React类中指定样式，如下所示：

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

我的目标应该是以这种方式进行所有样式设置，并且在CSS文件中完全没有指定样式吗？

或者我应该完全避免内联样式吗？

两种方法都做一点似乎有些奇怪和混乱——在调整样式时，需要检查两个地方。

Answer 1

我在React组件中广泛使用内联样式。我发现，在组件中对样式进行合并非常清晰，因为组件有哪些样式和没有哪些样式总是很清晰的。另外，拥有Javascript的全部功能确实简化了更复杂的样式需求。

起初我并不信服，但在涉足了几个月后，我已经完全转换了，并且正在将我所有的CSS转换为内联或其他JS驱动的css方法。

Facebook员工和React投稿人“vjeux”的演示也非常有用-https://speakerdeck.com/vjeux/react-css-in-js

Answer 2

React中的样式属性期望值是一个对象，即Key值对。

样式 = {}将在其中包含另一个对象，如{浮动：'right'}以使其工作。

<span style={{float:'right'}}>Download Audit</span>

希望这能解决问题

Answer 3

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

有许多方法差别很大：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（下划线/lodash）添加对多个状态的支持：

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

现在我们使用的是Object.assign，使我们的组件能够以不同的样式重用变得非常简单。如果我们想覆盖默认样式，我们可以在呼叫站点使用道具来覆盖，比如：

<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%宽度和高度。

这是“内联风格”争论中最具争议的领域。最终，这取决于您设计的组件以及您的团队对JavaScript的适应程度。

有一件事是肯定的，你需要图书馆的帮助。浏览器状态（：hover，：focus）和媒体查询在原始状态下是痛苦的。

我喜欢镭，因为这些困难部分的语法是为模拟SASS而设计的。

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

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上更详细地讨论了所有这些：内联样式以及何时最好“只使用CSS”。

我很乐意帮助你在这一过程中有新的发现：）来找我吧-