我正在尝试在类反应中使用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>
这是语法错误。试试这个：
className={`${c.overall_score <= 4 ? "summary" : ""}
${c.overall_score <= 6 ? "orange" : ""}
${c.overall_score <= 8 ? "speed" : ""}
${c.overall_score <= 10 ? "dynamic" : ""}`
}
或使用classnames像FortyTwo中的注释。我想这对您来说是一种更好的方法。
,使用三元条件示例应用程序
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>
);
}
}