React中结合If条件用Tailwind动态修改表格文本颜色

问题描述 #

从JSON获取数据渲染React表格，需要根据盈亏条件动态设置"Kar/Zarar"列的文本颜色：当(item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0)时显示红色，否则显示绿色。但原写法未生效，核心错误代码片段：

<td className='py-2 whitespace-nowrap'>
  {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0
   ? "text-red-400"
   : "text-green-400" 
  }
  <span>₺</span>
</td>

错误原因 #

你把Tailwind类名直接作为文本内容输出了，并没有将其应用到元素的className属性上，所以样式不会生效。

正确实现方法 #

步骤1：抽离计算逻辑（可选但推荐） #

先计算出盈亏值，避免重复计算，提升代码可读性：

const karZarar = item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet;

步骤2：动态绑定类名 #

将条件判断的类名应用到包裹盈亏文本的元素（或td本身）的className中：

方案一：直接在td上绑定动态类

<td className={`py-2 whitespace-nowrap ${karZarar < 0 ? 'text-red-400' : 'text-green-400'}`}>
  {karZarar}
  <span>₺</span>
</td>

方案二：用span包裹文本并绑定类

如果只需要文本变色，td的其他样式保持不变，可以用span单独包裹数值：

<td className='py-2 whitespace-nowrap'>
  <span className={karZarar < 0 ? 'text-red-400' : 'text-green-400'}>
    {karZarar}
  </span>
  <span>₺</span>
</td>

完整修改后的组件代码 #

const Table = () => {
  return (
    <div className='overflow-auto w-full'>
      <table className="mt-10 w-full">
        <thead className='bg-blue-900 text-white h-8'>
          <tr className='divide-x-2 divide-gray-200'>
            <th>Aracı Kurum</th>
            <th>Hisse Adı</th>
            <th>Maliyet</th>
            <th>Güncel Fiyat</th>
            <th>Adet</th>
            <th>Kar/Zarar</th>
            <th>Düzenle/Sil</th>
          </tr>
        </thead>
        <tbody className='text-center divide-y-2'>
          {data.map((item) => {
            // 抽离盈亏计算逻辑
            const karZarar = item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet;
            return (
              <tr key={item.hisseId} className='odd:bg-white even:bg-slate-100 divide-x-2 divide-gray-200'>
                <td className='py-2 whitespace-nowrap'>{item.araciKurum}</td>
                <td className='py-2 whitespace-nowrap'>{item.hisseAd}</td>
                <td className='py-2 whitespace-nowrap'>{item.hisseMaliyet}<span>₺</span></td>
                <td className='py-2 whitespace-nowrap'>{item.hisseGuncelFiyat}<span>₺</span></td>
                <td className='py-2 whitespace-nowrap'>{item.hisseAdet}</td>
                {/* 动态绑定类名到td */}
                <td className={`py-2 whitespace-nowrap ${karZarar < 0 ? 'text-red-400' : 'text-green-400'}`}>
                  {karZarar}
                  <span>₺</span>
                </td>
                <td className='text-center gap-6 flex justify-center py-2 whitespace-nowrap'>
                  <button><BiEdit size={25} className='text-green-500'/></button>
                  <button><BiTrashAlt size={25} className='text-red-500'/></button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者banshee1907