在 React 中使用条件语句根据条件更改表行的颜色

Question

产品有{名称，价格，数量}。根据数量，如果数量<10，则将产品行更改为蓝色，如果数量=0，则将产品行更改为红色，如果数量>0，则将产品行更改为正常。

function ProductRow(props){
  
    const product = props.product;
    const name = product.stocked && product.quantity===0 ?
    product.name :
    <span style={{color: 'red'}}>
      {product.name}
    </span>;
  const quantity = product.quantity>10 ?
  product.quantity :
  <span style={{color: 'blue'}}>
    {product.quantity}
</span>; 
       
    return (
      <tr>
        <td>{name}</td>
        <td>{product.price}</td>
        <td>{quantity}</td> 
      </tr>
    );
  
}

export default ProductRow;

Answer 1

我会创建一个函数，根据给定的数量，计算颜色，然后<tr>使用结果设置样式：

const getColor = (quantity) => {
    if (quantity === 0) return 'red';
    if (quantity < 10) return 'blue';
    return '';
};
function ProductRow({ product }) {
    return (
        <tr style={{ color: getColor(product.quantity) }}>
            <td>{product.name}</td>
            <td>{product.price}</td>
            <td>{product.quantity}</td>
        </tr>
    );
}