时间戳

首页 > 解决方案 > 在 React 中有条件地应用 CSS 类

reactjs - 在 React 中有条件地应用 CSS 类

问题描述

我知道这已经得到解答，但我无法弄清楚我的代码有什么问题。我正在尝试添加一个基于条件字段的类。

反应代码：

<div className="boards {task.IsClosed !== 0 ? 'complete' : ''}">
  <p>{task.TaskName}</p>
  <div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>

输出：

<div class="boards {task.IsClosed !== 0 ? 'complete' : ''}">
  <p>Task 2</p>
  <div><div>Completed</div></div>
</div>

我希望输出是<div class="boards complete">

标签： reactjs

解决方案


<div className=`boards ${task.IsClosed !== 0 ? 'complete' : ''}`>
  <p>{task.TaskName}</p>
  <div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>

我想你想要这个^^^

对于 javascript 中的字符串插值，` 字符必须用于引号，并且被插值的表达式必须在 ${} 内

...或者您可以创建一个变量来存储类，即

let className = task.IsClosed !== 0 ? 'complete' : '';
...
...
<div className={className}>
  <p>{task.TaskName}</p>
  <div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>

推荐阅读