如果className是

Question

我有以下内容：

<div className="safety-bar"></div>

我也有两个要应用于此的类：

如果user.safety_score > 0 ，则
• .active
• .zero （如果user.safety_score == 0

我唯一想到的方法是：

{ user.safety_score > 0 ? "safety-bar active" : "safety-bar zero" }

但是，如果两个if语句都不都是if，我想知道是否还有其他速记不涉及创建我可以使用的整个函数。

Answer 1

<div className="{`safety-bar ${user.safety_score > 0 ? 'active' : 'zero'}`}"></div>

它使用模板字符串语法使用条件运算符附加类。

Answer 2

您可以尝试：

render() {
  let safetyClass;
  if(user.safety_score > 0) {
   safetyClass = 'active'
  }

  if(user.safety_score === 0) {
   safetyClass = 'zero'
  }



  return <div className={`safety-bar ${safetyClass}`}>
}

可读代码比简写更好。

Answer 3

如果使用you want to avoid if或三元语句，则可以利用||运算符。

其工作原理是，当在user.safety_score中找不到flags时，它将返回undefined，并且将为所有值打印默认值active除了0。

let user = {
	safety_score: 0
}

const flags = ['zero']
// prints "safety-bar zero"
console.log(`safety-bar ${flags[user.safety_score] || 'active'}`);

user.safety_score = 3;
// prints "safety-bar active"
console.log(`safety-bar ${flags[user.safety_score] || 'active'}`);

老实说

{ user.safety_score > 0 ? "safety-bar active" : "safety-bar zero" }

看起来足够好。