Javascript JSX中的if语句类应用程序扩展了React.Component{ render（）{ 返回( {productList.map（（产品）=>{ 返回( 变量：{product.title} 类型：{product.Type} 生产者：{product.producer} {product.unitSize}{product.unit} Kolli mængde:{product.price*product.bulkSize} Antal:{product.quantity} {product.price}kr- ); })} ); } }_Javascript_Reactjs_Syntax_Jsx

Javascript JSX中的if语句类应用程序扩展了React.Component{ render（）{ 返回( {productList.map（（产品）=>{ 返回( 变量：{product.title} 类型：{product.Type} 生产者：{product.producer} {product.unitSize}{product.unit} Kolli mængde:{product.price*product.bulkSize} Antal:{product.quantity} {product.price}kr- ); })} ); } }

javascript reactjs syntax

Javascript JSX中的if语句类应用程序扩展了React.Component{ render（）{ 返回( {productList.map（（产品）=>{ 返回( 变量：{product.title} 类型：{product.Type} 生产者：{product.producer} {product.unitSize}{product.unit} Kolli mængde:{product.price*product.bulkSize} Antal:{product.quantity} {product.price}kr- ); })} ); } },javascript,reactjs,syntax,jsx,Javascript,Reactjs,Syntax,Jsx,我想在div“type”上做一个if语句，但我无法使语法正常工作。我是react/jsx的新手我想要一个if，即每当数组中的“type”为null时，就不应该出现“type”。试试看，type为null时，不会呈现type div： class App extends React.Component { render() { return ( <div className="bg"> {productList.map

我想在div“type”上做一个if语句，但我无法使语法正常工作。我是react/jsx的新手

我想要一个if，即每当数组中的“type”为null时，就不应该出现“type”。

试试看，type为null时，不会呈现type div：

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>
    );
  }
}

{product.type&&type:{product.type}

试试看，当type为null时，将不会呈现type div：

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>
    );
  }
}

{product.type&&type:{product.type}

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

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

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

您可以在render中使用条件语句

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

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

您可以使用JSX表达式来实现这一点。如果表达式的计算结果为

null

、

undefined

或

false

，则表达式出现的位置将不显示任何内容

您说过您的

product.type

可能是

null

，因此您可以使用功能强大的

和&

操作符：

item && item.type? Show type: null

⑨falsy值是在某一条件下被视为

false

的任何值。falsy值是

，

null

，

未定义

，

NaN

，

“

，当然还有

false

。所有其他值都是真实的。