如何在 JSX React 上隐藏变量渲染？

Question

我正在制作一个电子商务购物车并显示所有商品的总价格。但是当我像这样进行条件渲染时（如果没有加载任何产品）：

{cartItems.length &&
            <div>
                <p>Total price: $ {totalPrice} </p>
                <button onClick={confirmPurchase}>Confirm purchase</button>
            </div>}

由于变量“totalPrice”，React 没有显示任何内容，而是呈现“0”。我怎样才能隐藏它？

Answer 1

当您使用 && 运算符并且第一个值为假时（在您的情况下，您的 cartItems.length 将计算为 0），它将 return错误值 - 0.

实现此目的的另一种方法是使用三元运算符。您可以在此处明确并定义何时显示项目以及何时不显示项目：

{cartItems.length > 0 ? (
  <div>
    <p>Total price: $ {totalPrice} </p>
    <button onClick={confirmPurchase}>Confirm purchase</button>
  </div>
) : null}

如何在 JSX React 上隐藏变量渲染？

How can I hide the variable rendering on JSX React?

rendering

jsx

e-commerce

reactjs