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

处理样式的最佳方法是使用带有css属性集的类。

例：

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

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

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

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