ReactJS 7 - 如何根据其值有条件地仅更改表格单元格（而不是行）的背景颜色？

Posted 2023-02-22

【中文标题】ReactJS 7 - 如何根据其值有条件地仅更改表格单元格（而不是行）的背景颜色？

【英文标题】：ReactJS 7 - How to conditionally change the background color of table cell only (not the row) based on its value?

【发布时间】：2021-07-20 03:42:42

【问题描述】：

我正在尝试根据单元格内部的值更改单元格的背景颜色。 我目前正在使用这个库：react-data-table-component

逻辑：

如果值大于 0，则单元格的背景颜色为红色。 否则不会有背景色。

这是我当前的 Data Table 的 sn-p 代码：

const CountryTable = (items) => 

return(
    <DataTable
        title="Covid-19 Stats"
        defaultSortAsc="false"
        responsive
        defaultSortField="cases"
        defaultSortAsc=false
        striped
        highlightOnHover
        data=items
        columns=
            [
                
                    name: '#',
                    selector: (row, index) => index+1,
                    disableSortBy: true,
                ,
                
                    name: 'Country',
                    selector: 'country',
                    sortable: true,
                ,
                
                    name: 'Total Cases',
                    selector: 'cases',
                    sortable: true,
                ,
                
                    getProps: (state, rowInfo) => 
                        if (rowInfo && rowInfo.row) 
                        return 
                            style: 
                            background:
                                parseInt(rowInfo.row.todayCases) > 0 ? "red" : null
                            
                        ;
                         else 
                        return ;
                        
                    ,
                    name: 'Additional New Cases',
                    selector: 'todayCases',
                    sortable: true,
                ,
                
                    name: 'Current Active Cases',
                    selector: 'active',
                    sortable: true,
                ,
                
                    name: 'Total Deaths',
                    selector: 'deaths',
                    sortable: true,
                ,
                
                    name: 'Additional New Deaths',
                    selector: 'todayDeaths',
                    sortable: true,
                ,
                
                    name: 'Total Recoveries',
                    selector: 'recovered',
                    sortable: true,
                ,
                
                    name: 'Additional New Recoveries',
                    selector: 'todayRecovered',
                    sortable: true,
                ,
            ]
        
    />  
);

下面是它应该是什么样子的插图：

【问题讨论】：

你从哪里得到getProps 函数？我在他们的文档中没有看到这一点。

从这里：***.com/questions/53888948/…

【参考方案1】：

文档说您可以像这样设置条件样式：https://www.npmjs.com/package/react-data-table-component#conditional-style-object

const conditionalRowStyles = [
  
    when: row => row.calories < 300,
    style: 
      backgroundColor: 'green',
      color: 'white',
      '&:hover': 
        cursor: 'pointer',
      ,
    ,
  ,
  // You can also pass a callback to style for additional customization
  
    when: row => row.calories < 300,
    style: row => (
      backgroundColor: row.isSpecia ? 'pink' : 'inerit',
    ),
  ,
];

const MyTable = () => (
  <DataTable
    title="Desserts"
    columns=columns
    data=data
    conditionalRowStyles=conditionalRowStyles
  />
);

我很快整理了一个使用单元格和样式组件的示例：

https://codesandbox.io/s/upbeat-galileo-r7p34?file=/src/App.js

import "./styles.css";
import DataTable from "react-data-table-component";
import styled from "styled-components";

const StyledCell = styled.div`
  &.low 
    background: green !important;
  
  &.medium 
    background: orange;
  
  &.high 
    background: red !important;
  
`;

export default function App() 
  let items = [
    
      Country: "Canada",
      AdditionalNewCases: 500
    ,
    
      Country: "England",
      AdditionalNewCases: 5000
    ,
    
      Country: "USA",
      AdditionalNewCases: 500000
    
  ];
  function getCssClass(value) 
    if (value > 5000) return "high";
    else if (value > 500) return "medium";
    return "low";
  
  return (
    <DataTable
      title="Covid-19 Stats"
      defaultSortAsc="false"
      responsive
      defaultSortAsc=false
      striped
      highlightOnHover
      data=items
      columns=[
        
          name: "number",
          selector: (row, index) => index + 1,
          disableSortBy: true
        ,
        
          name: "Country",
          selector: "Country",
          sortable: true
        ,
        
          name: "New Cases",
          selector: "AdditionalNewCases",
          sortable: true,
          cell: (row) => (
            <StyledCell className=getCssClass(row.AdditionalNewCases)>
              row.AdditionalNewCases
            </StyledCell>
          )
        
      ]
    />
  );