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

我现在正在做一些React，我想知道是否有一种“正确”的方法来进行条件样式化。在他们使用的教程中

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

---

我不喜欢使用内联样式，所以我想改为使用类来控制条件样式。如何以反应思维的方式来看待这一点？或者我应该只使用这种内联样式吗？

首先，在样式方面我同意你的观点-我也会（而且确实）有条件地应用类，而不是内联样式。但您可以使用相同的技术：

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

var类=[]；
如果（完成）类。推送（“完成”）；
如果（foo）类。推送（“foo”）；
如果（某些复杂条件）类。推（“条”）；
返回；

如果您喜欢使用类名，请务必使用类名

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

您也可能会发现该软件包很有帮助。使用它，您的代码将如下所示：

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

没有“正确”的方法来进行条件样式化。做最适合你的事。就我自己而言，我更喜欢避免内联样式，并以刚才描述的方式使用类

POSTSCRIPT[06-AUG-2019]

尽管React对样式设计毫无兴趣，但这几天我还是建议使用JS中的CSS解决方案；即或。如果您是新手，请从CSS类或内联样式开始。但是，一旦您对React感到满意，我建议您采用这些库中的一个。我在每个项目中都使用它们。

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

---

签出上面的代码。这就行了。

我在回答同一个问题时遇到了这个问题。McCrohan使用类数组和联接的方法是可靠的

根据我的经验，我一直在使用大量的遗留ruby代码，这些代码正在转换为React，当我们构建组件时，我发现自己正在寻找现有的css类和内联样式

组件内的示例代码段：

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

//如果失败，进度条为红色，否则为绿色
处理样式的最佳方法是使用具有一组css属性的类

示例：


getColor（）{
让class=“badge m2”；
class+=this.state.count==0？“警告”：危险；
返回舱；
}
而不是这个：

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

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

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


链接中的关键信息位：

短路意味着在JavaScript中，当我们计算AND表达式（&&&）时，如果第一个操作数为false，JavaScript将短路，甚至不会查看第二个操作数

值得注意的是，如果第一个操作数为false，这将返回false，因此可能需要考虑这将如何影响您的样式。

其他解决方案可能是更好的做法，但认为值得分享。
如果需要有条件地应用内联样式（应用全部或不应用），则此表示法也适用：

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

如果“someCondition”未满足，则传递空对象
 另一种方法，使用内联样式和扩展运算符

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

这种方法在某些情况下非常有用，因为您需要根据条件同时添加一组属性。
您可以使用类似的方法

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

内联样式处理
使用Css
在js中

在css中

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

Js样式表也可以这样做
我想你可能会对
redux
和
react
感到困惑。Redux与样式无关。我认为您最喜欢的是文档，但对于标记交换兼容性不重要的应用程序过于热情。一些主要的web应用程序实际上正在摆脱类，只使用内联样式，这比5个应用规则中哪一个使文本加粗更容易预测和推理。当属性是动态的时，您不会像处理重复文档那样节省太多带宽。应用程序的语义（查看源代码标记）也没有那么重要…@rossipedia啊，是的，谢谢你，搞混了，思考这个问题时正在看redux教程，谢谢！如果由于层叠，您不确定文本装饰的值是多少，并且如果complete为true，您只希望应用一条线，那么您必须构建一个样式对象。这样，当它是另一个值时，不会意外地将其设置为“无”。conststyle={}如果（complete）{style['textDecoration']='line-through'}正在寻找类似的东西。条件内联样式，谢谢。。==中的小错误。如果您决定使用className作为条件样式方法，则不应将className与style属性组合，这有点麻烦。没有
类名库
。我建议您使用
undefined
而不是
null
。
className
属性将字符串或未定义类型（String | undefined）作为输入类型--⚡️@JadRizk甚至更好的方法是，如果您没有有效的值来设置类名，则根本不设置它
const attrs=completed？{className:'text-strike'}:{}
。这样，除非您有一个好的值要分配，否则根本不设置类名。这是设置某些内联样式的一种重要方法，在这些样式中，您无法知道当前值是什么（因为它可以由CSS在您可能无法控制的文件中设置）。@LinuxInstitute如果所有字段的计算结果都为false，则
classnames
仅返回一个空字符串。这不会受到任何CSS的影响。@DavidL.Walsh 21小时前，我认为JadRizk的解决方案是在
null
和
undefined
之间做出错误选择，仍然会导致html中出现无值
class
属性（即
而不是
）因此，我提供了一种完全避免设置
className
的方法。碰巧的是，我是
 style={{
              whiteSpace: "unset",
              wordBreak: "break-all",
              backgroundColor: one.read == false && "#e1f4f3",
              borderBottom:'0.8px solid #fefefe'
            }}

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

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

 style={{
              whiteSpace: "unset",
              wordBreak: "break-all",
              backgroundColor: one.read == false && "#e1f4f3",
              borderBottom:'0.8px solid #fefefe'
            }}