在 React 循环中根据条件动态添加 CSS ClassName答案

【问题标题】：Add CSS ClassName dynamically in React loop Based on Condition在 React 循环中根据条件动态添加 CSS ClassName
【发布时间】：2021-03-23 16:48:42
【问题描述】：

我已经通过数据对循环组件做出反应。我需要根据字段“{stateItem.transactionCoverStatus}”值之一动态检查添加 ClassName。

假设transactionCoverStatus == x 然后color-blue 否则if == y 然后color-red.. 等等。

大约有 5 个可能的值，所以我也想知道我是否可以在单独的方法中计算，该方法接受参数并返回类名！

  <tbody>
      {
         eziTransactionCollection.map((stateItem, stateIndex) =>(

           <tr key={stateIndex}>
              <td className="td-align-centre">{stateItem.eziTransactionId}</td>
              <td>{stateItem.transactionCoverStatus}</td>
              <td>{stateItem.loginDateTime}</td>
              <td>{stateItem.logoutDateTime}</td>
            </tr>
         ))

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以使用对象来映射类变体并传递您的状态以检索值：

const COVER_COLORS = {
  active: 'blue',
  disabled: 'gray',
  warning: 'yellow',
}

const coverClass = (coverStatus) => {
  const variant = COVER_COLORS[coverStatus]
  return variant ? `color-${variant}` : '' // or return a default class
}

...

           <tr key={stateIndex}>
              <td className="td-align-centre">{stateItem.eziTransactionId}</td>
              <td className={coverClass(stateItem.transactionCoverStatus)}>{stateItem.transactionCoverStatus}</td>
              <td>{stateItem.loginDateTime}</td>
              <td>{stateItem.logoutDateTime}</td>
            </tr>

【讨论】：

【解决方案2】：

在 react 中给类名设置条件很容易

: 表示否则。

? 表示那么。

 <td className={stateItem.transactionCoverStatus==='x' ? 'blue' : 'red'}>{stateItem.transactionCoverStatus}</td>

如果你想给出多个条件。您应该使用|| 运算符

<td className={stateItem.transactionCoverStatus==='x' || stateItem.transactionCoverStatus==='y'  ?  'red' : 'green'}>{stateItem.transactionCoverStatus}</td>

【讨论】：