如何在 React jsx 中根据另一个行条件突出显示一行？

Question

如果比率（列）的值等于或大于 0.96，我需要用红色突出显示行。我不确定在哪里添加这些行来进行这些更改。谁能帮我这个？我正在尝试用红色突出显示条件满足的行。即如果比率值大于或等于 0.96。

这是我的代码：

import React, { useState, useContext } from "react";
import { AppContext } from "../../context/AppContext";
import { getCostSales} from "../../API/api";
import Button from "react-bootstrap/Button";
import Table from "react-bootstrap/Table";

const CostSales = () => {
  const {
    userRole,
    employee,
    setUserRole,
    setEmployee,
    isLoggedIn,
    setIsLoggedIn
  } = useContext(AppContext);

  const [tableData, setTableData] = useState([]);

  // TODO: conditional render for table? or can show table headers at least?
  const onHandleRunCostSales = () => {
    //call API/api method here
    console.log("Run below cost sales report clicked:");
    getCostSales().then((res) => {
      if (res) {
        setTableData(res);
        console.log("res in below cost sales report: ", res);
      }
    });
  };
  return (
    <div>
      {userRole === "Manager" || userRole === "Owner" ? (
        <div>
          <Button variant="primary" onClick={onHandleRunCostSales}>
            Run Report
          </Button>
          {tableData ? (
            <div>
              <Table>
                <thead>
                  <tr>
                    <th>Vin</th>
                    <th>Date</th>
                    <th>Invoice Price</th>
                    <th>Sold Price</th>
                    <th>Ratio</th>
                    <th>Customer Name</th>
                    <th>SalesPerson</th>
                  </tr>
                </thead>
                <tbody>
                  {tableData.map((rowData, index) => (
                    <tr>
                      <td>{rowData.vin}</td>
                      <td>{rowData.date}</td>
                      <td> {rowData.invoice_price} </td>
                      <td>{rowData.sold_price}</td>
                      <td>{rowData.ratio}</td>
                      <td>{rowData.customer_name}</td>
                      <td>{rowData.salesperson}</td>
                    </tr>
                  ))}
                </tbody>
              </Table>
            </div>
          ) : (
            <div>
              <p>No data available for report</p>
            </div>
          )}
        </div>
      ) : (
        <div>
          <p>Sorry, we can't show you this page</p>
        </div>
      )}
    </div>
  );
};

export default CostSales;

Answer 1

您可以根据比率为tr元素添加条件样式

更新：您可以使用 util 方法来根据定量决定颜色

function highlightColor(ratio) {
  if (ratio > 0.98) {
    return "green";
  } else if (ratio >= 0.96) {
    return "red";
  }
  return "white";
}

<tbody>
  {tableData.map((rowData, index) => (
    <tr style={{ backgroundColor: highlightColor(rowData.ratio) }}>
      <td>{rowData.vin}</td>
      <td>{rowData.date}</td>
      <td> {rowData.invoice_price} </td>
      <td>{rowData.sold_price}</td>
      <td>{rowData.ratio}</td>
      <td>{rowData.customer_name}</td>
      <td>{rowData.salesperson}</td>
    </tr>
  ))}
</tbody>;