JSX表格如何根据row.BB数值条件设置对应行背景为红色

实现方法 #

你当前用的是Chakra UI组件库的表格组件，只需要在渲染行<Tr>的时候动态绑定背景色属性即可，修改逻辑很简单：

核心修改点 #

给<Tr>标签新增动态bg属性，判断row.BB的值匹配规则时设置红色背景，修改后的完整代码如下：

return (
    <>
        <Navigation />
        <Box bg={'white'} w="100%"
             p={4}
             m={4}
             color="black"
             rounded={'md'}
        >
                 <Table size='sm' variant='striped' colorScheme='gray'>
                     <Thead>
                         <Tr>
                            <Th>A</Th>
                            <Th>B</Th>
                            <Th>C</Th>
                         </Tr>
                     </Thead>
                     <Tbody>
                     {file.map((row, index) => (
                         <Tr 
                            key={index}
                            bg={row.BB <= 100 ? 'red.100' : 'transparent'}
                         > 
                             <Td>{row.AA}</Td>
                             <Td>{row.BB}</Td>
                             <Td>{row.CC}</Td>
                         </Tr>
                     ))}
                     </Tbody>
                 </Table>
        </Box>
    </>
);
}

补充说明 #

• 颜色可以根据视觉需求调整，red.100是浅红色，不会遮挡文字内容，要是需要正红色可以改为red.500，也可以直接传十六进制颜色值比如#ffcccc
• 如果开启的striped斑马纹样式覆盖了自定义背景，可以改用sx属性提升样式优先级，写法如下：

  <Tr 
    key={index}
    sx={{background: row.BB <= 100 ? 'red.100' : 'inherit'}}
  >
  

内容的提问来源于stack exchange，提问作者Dhu