JSX 中的 if 語句

Question

class App extends React.Component {

  render() {

    return (

      <div className="bg">
        {productList.map((product) => {
          return (
            <div className="mainContainer">
              <div className="billedeContainer">
                <img src={product.image} />
              </div>
              <div className="titel">Vare: {product.title}</div>
              <div className="type">Type: {product.type}</div>
              <div className="producent">Producent: {product.producer}</div>
              <div className="unit">
                {product.unitSize} {product.unit}
              </div>
              <div className="kolli">
                Kolli mængde: {product.price * product.bulkSize}
              </div>
              <div>Antal: {product.quantity}</div>

              <div className="prisContainer">
                <div className="pris">{product.price} kr,-</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

我想對 div“type”做一個 if 語句，但我無法讓語法正常工作。 我是 react/jsx 的新手。

我想要一個 if ，當我的數組中的“類型”為空時，就不應該出現“類型”。

Answer 1

試試看，當 type 為 null 時，Type div 不會被渲染：

{product.type && <div className="type">Type: {product.type}</div>}

Answer 2

您可以在渲染中使用條件語句。

item && item.type? Show type: null

但如果代碼太復雜，最好將代碼放在單獨的函數中。

Answer 3

您可以使用 JSX 表達式來做到這一點。 如果表達式的計算結果為null 、 undefined或false ，則表達式出現的地方根本不顯示任何內容。

您說您的product.type可能為null ，因此您可以使用功能強大的&&運算符：

{product.type && <div className="type">Type: {product.type}</div>}

{}是 JSX 表達式。 &&運算符的工作方式如下：它評估其左側操作數，如果該值為falsy ，¹ 將該值作為其結果，完全忽略右側操​​作數。 如果左側操作數的值為真，則表達式計算右側操作數並將該值作為其結果。

因此，如果product.type為null ，則{product.type && <Stuff />}為{null}並且不會呈現任何內容。 如果product.type不為null ，則{product.type && <Stuff />}產生{<Stuff />} 。

如果您正在測試可能為0或類似值的內容，則不會使用&&因為您最終會在呈現的輸出中得到0 （因為只有null 、 undefined和false被忽略）。 在這種情況下，您將使用條件表達式：

{mightBeZero ? <Stuff /> : null}

---

¹假值是在條件中被視為false任何值。 假值是0 、 null 、 undefined 、 NaN 、 "" ，當然還有false 。 所有其他值都是真實的。

Answer 4

<div className="type">Type: {product.type}</div>

=> {product.type ? (<div className="type">Type: {product.type}</div>) : null } {product.type ? (<div className="type">Type: {product.type}</div>) : null }

或者

`{product.type && (<div className="type">Type: {product.type}</div>)}`