如何更改行的背景顏色

Question

我有這個代碼我需要這樣做如果{row.BB} <= 100然后將具有這個數字的行背景顯示為紅色我該怎么做這個代碼連接到數據庫並使用JSX文件

    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}> 
                                 <Td>{row.AA}</Td>
                                 <Td>{row.BB}</Td>
                                 <Td>{row.CC}</Td>
                             </Tr>
                         ))}
                         </Tbody>
                     </Table>
            </Box>
        </>
    );
}

Answer 1

我假設“bg”用於給出行的背景顏色，它也用於代碼中的框背景顏色。

<Tr bg={ (row.BB <= 100 ? 'red': 'white') } key={index}> 
    <Td>{row.AA}</Td>
    <Td>{row.BB}</Td>
    <Td>{row.CC}</Td>
</Tr>

Answer 2

有很多方法你可能會 go 關於這個，但我認為最簡單的方法是保持簡單（因為你已經在使用老式的<table> s和<td> s ）。

你可以嘗試這樣的事情：

<Tr>
  ...
  <Td bgcolor={row.BB <= 100 && 'red'}>
</Tr>

讓我知道這是否適合你。

Answer 3

你的問題對我來說不是很清楚，但仍然考慮你想改變這一行<Td>{row.BB}</Td>那么，你可以通過兩種方式做到這一點

1. 使用 If else 塊

` {file.map((行, 索引) => (

if (row.BB <= 100){
    return (
        <Tr key={index} style={{backgroundColor:'red'}}> 
            <Td>{row.AA}</Td>
            <Td>{row.BB}</Td>
            <Td>{row.CC}</Td>
        </Tr>
    )
else {
    return(
        <Tr key={index}> 
            <Td>{row.AA}</Td>
            <Td>{row.BB}</Td>
            <Td>{row.CC}</Td>
        </Tr>
    )}
}
))}

`

2. 如果您知道三元運算符，那么您可以簡單地使用 ` { file.map((row, index) => (

    { row.BB <= 100? (<Tr key={index} style={{ backgroundColor: 'red' }}> <Td>{row.AA}</Td> <Td>{row.BB}</Td> <Td>{row.CC}</Td> </Tr>): (<Tr key={index}> <Td>{row.AA}</Td> <Td>{row.BB}</Td> <Td>{row.CC}</Td> </Tr>) }

   ))}} `

請讓我知道這些方法是否有效