【问题标题】：Correct way to handle conditional styling in React在 React 中处理条件样式的正确方法
【发布时间】：2016-06-16 04:46:38
【问题描述】：

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

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

我不喜欢使用内联样式，所以我想使用一个类来控制条件样式。在 React 的思维方式中如何处理这个问题？还是我应该只使用这种内联样式方式？

【问题讨论】：

我想你可能对redux 和react 感到困惑。 Redux 与样式无关。
我认为您的偏好是针对文档的，但对标记交换兼容性不重要的应用程序过于热情。一些主要的 Web 应用程序实际上正在摆脱类并仅使用内联样式，这比 5 个应用规则中的哪一个使文本变粗更容易预测和推理。当属性是动态的时，您不会像处理重复文档那样节省太多带宽。应用程序的语义（视图源标记）也不是那么重要......
@rossipedia 啊是的谢谢，搞混了，在看redux教程的时候想到这个，谢谢！
如果由于级联而不确定 text-decoration 的值是什么，并且您只想在 complete 为真时应用 line-through，则必须构建一种样式目的。这样，当它是另一个值时，您不会意外地将其设置为 none。 const style = { } if (complete) { style['textDecoration'] = 'line-through' }

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

您可能还会发现classnames 软件包很有帮助。有了它，您的代码将如下所示：

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

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

POSTSCRIPT [2019 年 8 月 6 日]

尽管 React 对样式没有任何意见，但这些天我会推荐一个 CSS-in-JS 解决方案；即styled components 或emotion。如果您是 React 新手，请坚持使用 CSS 类或内联样式。但是，一旦您对 React 感到满意，我建议您采用这些库之一。我在每个项目中都使用它们。

【讨论】：

嘿，如果您决定使用 className 作为条件样式方法。没有classNames lib。我建议您使用undefined 而不是null。 className 属性将 String 或 undefined 类型作为输入类型 - type(String | undefined) -- ⚡️
@JadRizk 更好的方法是如果您没有有效的值来设置 className ，则根本不设置它。 const attrs = completed?{className:'text-strike'}:{} 然后是 <li {...attrs}>text to maybe strike</li>（扩展运算符）。这样你就根本不用设置 className ，除非你有一个好的价值来分配。这是设置一些您无法知道当前值是什么的内联样式的重要方法（因为它可以由 CSS 在您可能无法控制的文件中设置）。
@LinuxDisciple 如果所有字段都评估为 false，那么 classnames 只会返回一个空字符串。这不会受到任何 CSS 的影响。
@DavidL.Walsh 21 小时前我认为 JadRizk 的解决方案是 null 和 undefined 之间的错误选择，这仍然会导致 html 中的无值 class 属性（即 @ 987654336@ 而不是<p></p>) 所以我提供了一种完全避免设置className 的方法。碰巧我对 JadRizk 的解决方案是错误的。对于所述问题，我相信您使用 JadRizk 改进的解决方案是最好的。我的语法可以有条件地设置任意的 props 列表和它们的值，但是仅仅设置一个类名就太过分了。
“没有“正确”的方式来做条件样式。做最适合你的事情。“谢谢你，我一直在努力寻找“最佳实践”

【解决方案3】：

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

查看上面的代码。这样就可以了。

【讨论】：

正是在寻找这样的东西。有条件的内联样式，谢谢。
。 == 中的小错字。
这不是和问题中发布的完全相同的方法吗？

【解决方案4】：

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

根据我的经验，我一直在处理许多正在转换为 React 的遗留 ruby 代码，并且在我们构建组件时，我发现自己正在使用现有的 css 类和内联样式。

组件内的示例 sn-p：

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

再次，我发现自己接触到遗留的 css 代码，将其与组件“打包”并继续前进。

所以，我真的觉得什么是“最佳”有点悬而未决，因为该标签会根据您的项目而有很大差异。

【讨论】：

你不应该将 classNames 与 style 属性结合起来，这有点乱
顺便说一句 - 第二个失败的只有一个单引号在右边......它需要是： ${failed ? '失败' : ''} 或 ${失败？失败：''}，而不是 ${失败？失败'：''}

【解决方案5】：

处理样式的最佳方法是使用具有一组 css 属性的类。

示例：

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

【讨论】：

【解决方案6】：

而不是这个：

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

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

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

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

链接中的关键信息：

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

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

这种模式不会造成不必要的差异吗？我对 DOM 差异的理解是，这里的 style 属性总是会改变，因为在 Javascript {} != {}跨度>
好笔记。我不确定。

【解决方案8】：

另一种方式，使用内联样式和展开操作符

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

这种方式在您想根据条件同时添加一堆属性的情况下很有用。

【讨论】：

如果您不想更改默认样式，这是一个不错的方法
我想在这里添加 1 个变体：...completed && { textDecoration: completed }

【解决方案9】：

你可以使用这样的东西。

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

或者，您可以使用classnames NPM 包来使动态和条件类名称道具更易于使用（尤其是比条件字符串操作更是如此）。

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

【讨论】：

【解决方案10】：

内联样式处理

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 样式表也可以做到这一点

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

如果有人使用Typescript（除了null 的样式值）并且想要使用react 样式，我会建议这个hack：

<p 
style={choiceStyle ? styles.choiceIsMade : styles.none}>
{question}
</p>

const styles = {
choiceIsMade: {...},
 none: {}
}

【讨论】：

【解决方案13】：

如果您想根据条件分配样式，最好为样式使用类名。对于这个任务，有不同的方法。这是其中两个。

1.

    <div className={`another-class ${condition ? 'active' : ''}`} />

    <div className={`another-class ${condition && 'active'}`} />

【讨论】：