我正在从一个.json文件中获取一些数据到一个Reaction表中.在获得数据之后,我计算了一些数据并显示在另一个表格单元格中.我想要的是,当计算这些单元格时,我希望结果根据tailwind 中的IF条件更改 colored颜色 .

对于EX: If{item.hisseGuncelFiyat*item.hisseAdet-item.hisseMaliyer*item.hisseAdet<0 那我想要红色或绿色

以下是代码:

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 在元素的类中工作,所以您只需要将三元组移到类名称字符串中,如下所示:

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

注意三元语句是如何位于类名称字符串中的--这就是您所遗漏的.除此之外,你所拥有的应该是有效的.

Reactjs相关问答推荐

无法使用#13;或br将新行设置为文本区域'"&"<>

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除?

如何从react 18-nextjs 14应用程序路由中的客户端组件呈现服务器组件?

react -无法获取函数的最新参数值

我从 S3 存储桶下载图像时收到错误

i18next中复数键的理解

使用 react pro 侧边栏展开折叠菜单

一周前刚开始学习React,一直在调试为什么输入框在每次输入后都没有焦点

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

单击按钮或文本从一个组件移动到另一个组件

React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

Cypress ,重试不再附加到 DOM 的元素

从 API 中提取映射数组后出现重复元素

使用 yarn 编译 protobuf js 时出现错误pbjs: command not found

Cypress - 在继续之前等待下一个按钮重新出现

如果查询不存在,如何返回所有产品?

如何在 Reactjs 中判断受保护路由上的用户角色?

为什么我在运行一些 npm react 命令时会收到这些警告?

NextJs - 如何从站点 map 生成器中删除重复的 URL?

有没有办法只针对 React map 中的一个按钮?