我是新反应。

我用react-table模块制作了表格。遵循示例页面。但我有新问题

我做了两排桌子。我想做的是比较每一列的值，然后制作不同的背景颜色。

但我找不到控制每一个细胞的方法。（我做的内容如下）

那么我的表组件就在下面。

import { useTable } from "react-table"

const TableContainer = ({ columns, data }) => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })
  return (<table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
  <thead>
    {headerGroups.map(headerGroup => (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th
            {...column.getHeaderProps()}
            style={{
              borderBottom: 'solid 3px red',
              background: 'aliceblue',
              color: 'black',
              fontWeight: 'bold',
              fontSize:'10px',
            }}
          >
            {column.render('Header')}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  
  <tbody {...getTableBodyProps()}>
       
    {rows.map(row => {  
      prepareRow(row)
      return (
        <tr {...row.getRowProps()}>
          {row.cells.map(cell => { 
            
            return (
              <td
                {...cell.getCellProps()}
                style={{
                  padding: '10px',
                  border: 'solid 1px gray',
                  background: 'papayawhip',
                  fontSize : '10px',
                }}
              >
                {cell.render('Cell')}
              </td>
            )
          })}
        </tr>
      )
    })}
  </tbody>
</table>)}

export default TableContainer

我可以这样比较每一列的值。

{rows[0].values["폴산"] !== rows[1].values["폴산"]? console.log("diffenent") : console.log("same") }

但是我找不到访问每个细胞样式的方法