首先，作为一个样式问题，我同意你的观点——我也会(也会这样做)有条件地应用类，而不是内联样式。但你也可以用同样的方法:

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

如果您喜欢使用类名，那么一定要使用类名。

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

您可能还会发现 类名软件包很有帮助:

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

没有“正确”的方法来做条件样式。做对你最有利的事。对于我自己来说，我更喜欢避免内联样式，并以刚才描述的方式使用类。

POSTSCRIPT [06-AUG-2019]

虽然 React 对于样式没有固执己见，但是最近我建议使用 CSS-in-JS 解决方案，即 风格化组件或 情感。如果您是新的反应，坚持 CSS 类或内联样式开始。但是，一旦您对 React 感到满意，我建议采用其中的一个库。我在每个项目中都用到它们。

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

检查以上代码。这将做的诀窍。

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

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

组件内的示例代码片段:

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

同样，我发现自己开始使用遗留的 css 代码，用组件“打包”它，然后继续前进。

所以，我真的觉得什么是“最好的”这个问题有点悬而未决，因为这个标签会根据你的项目而有很大的不同。

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

例如:

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


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

而不是这样:

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

你可以尝试使用短路:

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

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

链接中的关键信息:

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

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

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

如果需要有条件地应用内联样式(要么全部应用，要么全部不应用) ，那么这种表示法也适用:

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

如果‘ somItem’没有实现，那么传递空对象。

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

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

或者，可以使用 类名 NPM 包使动态和条件 className 支持更容易使用(特别是比条件字符串操作更容易使用)。

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'

嵌入式样式处理嵌入式样式处理

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

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

如果有人使用 Typescript(除了 null值的样式)并想使用反应样式，我建议这样做:

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


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

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

1.

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

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

基于组件状态有条件地更改内联 CSS。

这也是在 React 中处理条件样式的正确方法。

条件

范例 = >

{this.state.input.length > 15 ? inputStyle={border: '3px solid red'}: inputStyle }

这个代码意味着如果在输入字段中输入的字符超过15个，那么我们的输入字段的边框将是红色的，边框的长度将是3px。

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

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