Блог

Мне нужно выделить строки красным цветом, если значение коэффициента (столбца) равно или больше 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 = () =gt; {  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 = () =gt; {  //call API/api method here  console.log("Run below cost sales report clicked:");  getCostSales().then((res) =gt; {  if (res) {  setTableData(res);  console.log("res in below cost sales report: ", res);  }  });  };  return (  lt;divgt;  {userRole === "Manager" || userRole === "Owner" ? (  lt;divgt;  lt;Button variant="primary" onClick={onHandleRunCostSales}gt;  Run Report  lt;/Buttongt;  {tableData ? (  lt;divgt;  lt;Tablegt;  lt;theadgt;  lt;trgt;  lt;thgt;Vinlt;/thgt;  lt;thgt;Datelt;/thgt;  lt;thgt;Invoice Pricelt;/thgt;  lt;thgt;Sold Pricelt;/thgt;  lt;thgt;Ratiolt;/thgt;  lt;thgt;Customer Namelt;/thgt;  lt;thgt;SalesPersonlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  {tableData.map((rowData, index) =gt; (  lt;trgt;  lt;tdgt;{rowData.vin}lt;/tdgt;  lt;tdgt;{rowData.date}lt;/tdgt;  lt;tdgt; {rowData.invoice_price} lt;/tdgt;  lt;tdgt;{rowData.sold_price}lt;/tdgt;  lt;tdgt;{rowData.ratio}lt;/tdgt;  lt;tdgt;{rowData.customer_name}lt;/tdgt;  lt;tdgt;{rowData.salesperson}lt;/tdgt;  lt;/trgt;  ))}  lt;/tbodygt;  lt;/Tablegt;  lt;/divgt;  ) : (  lt;divgt;  lt;pgt;No data available for reportlt;/pgt;  lt;/divgt;  )}  lt;/divgt;  ) : (  lt;divgt;  lt;pgt;Sorry, we can't show you this pagelt;/pgt;  lt;/divgt;  )}  lt;/divgt;  ); };  export default CostSales;  

Вы можете добавить условный стиль для tr элемента на основе соотношения

Обновление: вы можете использовать метод util для выбора цвета на основе рациона

 function highlightColor(ratio) {  if (ratio gt; 0.98) {  return "green";  } else if (ratio gt;= 0.96) {  return "red";  }  return "white"; }  lt;tbodygt;  {tableData.map((rowData, index) =gt; (  lt;tr style={{ backgroundColor: highlightColor(rowData.ratio) }}gt;  lt;tdgt;{rowData.vin}lt;/tdgt;  lt;tdgt;{rowData.date}lt;/tdgt;  lt;tdgt; {rowData.invoice_price} lt;/tdgt;  lt;tdgt;{rowData.sold_price}lt;/tdgt;  lt;tdgt;{rowData.ratio}lt;/tdgt;  lt;tdgt;{rowData.customer_name}lt;/tdgt;  lt;tdgt;{rowData.salesperson}lt;/tdgt;  lt;/trgt;  ))} lt;/tbodygt;;