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

Question

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

逻辑：

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

这是我当前的代码片段Data Table：

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,
                },
            ]
        }
    />  
);
}

这是它应该是什么样子的图示：

Answer 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>
          )
        }
      ]}
    />
  );
}