在React中处理条件样式的正确方法

Question

我现在正在做一些React,我想知道是否有一种"正确"的方式来做条件样式.在他们使用的教程中

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

我不想使用内联样式,所以我想改为使用类来控制条件样式.如何以React的思维方式解决这个问题？或者我应该使用这种内联样式方式？

Answer 1

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

查看上面的代码.那就行了.

Answer 2

如果您需要有条件地应用内联样式（应用全部或不应用），则此表示法也适用：

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

如果 'someCondition' 未满足，则传递空对象。

Answer 3

如果您更喜欢使用类名,请务必使用类名.

className={completed ? 'text-strike' : null}

您可能还会发现类名包有用.有了它,您的代码将如下所示:

className={classNames({ 'text-strike': completed })}

没有"正确"的方式来进行条件样式.做任何最适合你的事情.对于我自己,我更喜欢避免内联样式并以刚才描述的方式使用类.

Answer 4

而不是这个：

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

您可以使用短路尝试以下操作：

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

来自链接的关键信息：

短路意味着在 JavaScript 中，当我们评估 AND 表达式 (&&) 时，如果第一个操作数为假，JavaScript 将短路，甚至不会查看第二个操作数。

值得注意的是，如果第一个操作数为假，这将返回假，因此可能必须考虑这将如何影响您的风格。

其他解决方案可能是更多的最佳实践，但认为值得分享。

Answer 5

内联样式处理

style={{backgroundColor: selected ? 'red':'green'}}

使用 CSS

在js中

className={`section ${selected && 'section_selected'}`}

在 CSS 中

.section {
  display: flex;
  align-items: center;
} 
.section_selected{
  background-color: whitesmoke;
  border-width: 3px !important;
}

同样可以用 Js 样式表完成

Answer 6

首先，就样式而言，我同意您的看法-我也会（也确实）有条件地应用类而不是内联样式。但是您可以使用相同的技术：

<div className={{completed ? "completed" : ""}}></div>

对于更复杂的状态集，请累积一组类并应用它们：

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

Answer 7

另一种方式，使用内联样式和扩展运算符

style={{
  ...completed ? { textDecoration: completed } : {}
}}

这种方式在某些情况下很有用，您希望根据条件同时添加一堆属性。

Answer 8

在某些条件下应用内联样式的排序方式。

style={areFieldsDisabled ? {opacity: 0.5} : '' }