我正在从 .json 文件获取一些数据到反应表中。获取该数据后,我计算一些数据并显示在另一个表格单元格中。我想要的是,当计算这些单元格时,我希望结果根据顺风中的 if 条件改变颜色。
对于前: 如果 {item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0 then i want to be red or green
这是代码:
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)=>(
<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 className='py-2 whitespace-nowrap'>
{item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0
? "text-red-400"
: "text-green-400"
}
<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>
)
}
我尝试过类似的东西,但可能不知道如何写
<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 字符串中,如下所示:
<td className='py-2 whitespace-nowrap
{item.hisseGuncelFiyat * item.hisseAdet - item.hisseMaliyet * item.hisseAdet < 0
? "text-red-400" : "text-green-400" }'>
<span>
₺
</span>
</td>
注意三元语句是如何位于 className 字符串内的 - 这就是您所缺少的。除此之外,你所拥有的应该有效。