JSX 中的 if 语句答案

【问题标题】：if statement inside JSXJSX 中的 if 语句
【发布时间】：2020-09-13 13:55:15
【问题描述】：

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 表示，只要我的数组中的“type”为空，那么就不应该出现“type”。

【问题讨论】：

看起来这种情况下最简单的选项是&& 运算符：reactjs.org/docs/…

标签： javascript reactjs syntax jsx

【解决方案1】：

我们试试，当type为null时，不会渲染Type div：

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

【讨论】：

【解决方案2】：

您可以使用 JSX 表达式来执行此操作。如果表达式的计算结果为 null、undefined 或 false，则表达式出现的位置不会显示任何内容。

你说你的product.type 可能是null，所以你可以使用奇怪强大的&& 运算符：

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

{} 是 JSX 表达式。 && 运算符的工作原理如下：它计算其左侧操作数，如果该值为 falsy，¹ 将值作为其结果，完全忽略右侧操作数。如果左侧操作数的值为 truthy，则表达式计算右侧操作数并将该值作为结果。

因此，如果 product.type 是 null，{product.type && <Stuff />} 是 {null}，则不会渲染任何内容。如果product.type 不是null，则{product.type && <Stuff />} 会产生{<Stuff />}。

如果您正在测试可能是0 或类似的东西，您不会使用&&，因为您最终会在渲染输出中得到0（因为只有null、@987654342 @ 和 false 被忽略）。在这种情况下，您将使用条件表达式：

{mightBeZero ? <Stuff /> : null}

¹ falsy 值是在条件中被视为false 的任何值。虚假值为0、null、undefined、NaN、""，当然还有false。所有其他值都是truthy。

【讨论】：

谢谢你的知识，我很感激！！

【解决方案3】：

您可以在渲染中使用条件语句。

item && item.type? Show type: null

但如果代码太复杂，最好将代码放在单独的函数中。

【讨论】：

【解决方案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>)}`

【讨论】：