小编NPa*_*Pam的帖子

产品有{名称，价格，数量}。根据数量，如果数量<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;