为什么这个Css类条件在React js中不起作用？

Question

我正在尝试在类反应中使用CSS条件，但它不起作用，我不知道我应用了4个条件，但不起作用，我不知道哪里出了问题。

谢谢

<td className="lom">
                  <span
                    className={
                      (`${c.overall_score <= 4 ? "summary" : ""}`,
                      `${c.overall_score <= 6 ? "orange" : ""}`,
                      `${c.overall_score <= 8 ? "speed" : ""}`,
                      `${c.overall_score <= 10 ? "dynamic" : ""}`)
                    }
                  >
                    {c.overall_score}
                  </span>
                </td>

Answer 1

使用三元条件样本应用程序

class App extends Component {
  render() {
    let arr = [
      { overall_score: 4 },
      { overall_score: 6 },
      { overall_score: 8 },
      { overall_score: 10 }
    ];

    return (
      <div>
        {arr.map(c => (
          <h3
            className={`${
              c.overall_score <= 4
                ? "summary"
                : c.overall_score <= 6
                ? "orange"
                : c.overall_score <= 8
                ? "speed"
                : c.overall_score <= 10
                ? "dynamic"
                : ""
            }`}
          >
            I'm colored
          </h3>
        ))}
      </div>
    );
  }
}

Answer 2

这是语法错误。试试这个：

className={`${c.overall_score <= 4 ? "summary" : ""} 
  ${c.overall_score <= 6 ? "orange" : ""} 
  ${c.overall_score <= 8 ? "speed" : ""}
  ${c.overall_score <= 10 ? "dynamic" : ""}`
}

或使用classnames，如FortyTwo在评论中提及。我想这对您来说是一种更好的方法。