如何隱藏和顯示在特定條件下作出反應

Question

目前我正在React/Redux和我的項目是一個電子商務應用程序，有兩種支付方式，即現金和卡支付，現在兩種支付方式顯示在我的產品顯示頁面，即現金和卡付款，我想做一個功能，我可以隱藏現金圖標，如果產品價格大於10,000，付款方式圖標來自靜態CSS精靈，任何人都可以幫助我要實現這一功能，在此先感謝，我的產品顯示頁面和我的反應代碼顯示如下

---

case 'warrantyAndPaymentMethods': 
       /* WARRANTY/PAYMENT METHODS */ 
       subComponent = (
        <div className={styles.warrantyPaymentCtr}> 
         {offer && 
          offer.warranty && 
          <div className={styles.warrantyCtr}> 
           <p className={styles.label}> 
            {I18n.getText('product.warranty', {}, 'Warranty')} 
           </p> 
           <p className={styles.warrantyDescription}> 
            {offer.warranty} 
           </p> 
          </div>} 

         {/* PAYMENT METHODS START */} 
         <div className={styles.paymentCtr}> 
          <p className={styles.label}> 
           {I18n.getText('product.payment', {}, 'Payment')} 
          </p> 
          {/* PAYMENT METHODS */} 
          <ul className="paymentMethods"> 
           <li className="cash">Cash</li> 
           <li className="visa">Visa</li> 
           <li className="mastercard">Mastercard</li> 
           <li className="amex">American Express</li> 
          </ul> 
         </div> 
         {/* PAYMENT METHODS END */} 
        </div> 
       ); 

Answer 1

同樣與其他元素：

     {/* PAYMENT METHODS */} 
         <ul className="paymentMethods"> 
          {price <= 10000 && <li className="cash">Cash</li>} 
          <li className="visa">Visa</li> 
          <li className="mastercard">Mastercard</li> 
          <li className="amex">American Express</li> 
         </ul> 

請注意，您所需要的price變量擁有目前的價格（或使用包含值其他一些變量）。