时间戳

首页 > 解决方案 > 在 React 的 if 语句中添加多个类

reactjs - 在 React 的 if 语句中添加多个类

问题描述

我正在尝试像这样有条件地在 React 中添加一些类....

<div
  className={`timesContainer ${
    index === selectedItemId && selectedItemState ? 'active' : ''
    this.checkwidth(slotRow.availableSlots) ? 'responsiveTimes' : ''
  }`}
>

但显然你不能多次这样做。有什么简洁的方法可以做到这一点？

谢谢

标签： reactjsclass

解决方案

使用多个${}s 进行插值。确保在它}和${旁边之间留一个空格。

<div
  className={`timesContainer ${
    index === selectedItemId && selectedItemState ? 'active' : ''
  } ${
    this.checkwidth(slotRow.availableSlots) ? 'responsiveTimes' : ''
  }`}
>

您也可以考虑提前定义类名，在某些情况下可能更容易阅读。

const className = `timesContainer ${
  index === selectedItemId && selectedItemState ? 'active' : ''
} ${
  this.checkwidth(slotRow.availableSlots) ? 'responsiveTimes' : ''
}`;

// ...

<div
  className={className}
>

推荐阅读