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

【问题标题】：Why This Css Class Condition not work in react js?为什么这个 Css 类条件在 react js 中不起作用？
【发布时间】：2020-03-08 00:27:42
【问题描述】：

我正在尝试在课堂反应中使用 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>

【问题讨论】：

对多种样式使用classnames

标签： javascript json reactjs styles conditional-statements

【解决方案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>
    );
  }
}

【讨论】：

【解决方案2】：

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

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

或者使用 classnames 就像 cmets 中提到的 FortyTwo 一样。我想这对你来说会是更好的方法。

【讨论】：