如何检查reactjsx中的条件？

Question

刚开始看reactjsx并尝试检查一个数组（this.state.content）是否为未定义和长度> 0。这是渲染方法的一部分：

display = (
     <section> 
      { 
       if (this.state.content.length >0) 
       { 
       this.state.content.map((item, i) => { 
        return <CardRenderer addPacks={true} key={i} container={item}/> 
       }) 
       } 
      } 
     </section> 
    ) 

然而，这并不工作，我怎样才能在jsx中首先检查这个arraylength？

Answer 1

尝试：

display = (
     <section> 
       { 
       this.state.content && this.state.content.map((item, i) => { 
        return <CardRenderer addPacks={true} key={i} container={item}/> 
       }) 
      } 
     </section> 
    ) 

的&&将短路地图如果this.state.content未定义，并且如果this.state.content具有零的长度，地图将什么也不做（但不会有一个错误）。

Answer 2

您可以使用三元运算符

display = (
     <section> 
      { 
       (this.state.content && this.state.content.length > 0)? 
       { 
       this.state.content.map((item, i) => { 
        return <CardRenderer addPacks={true} key={i} container={item}/> 
       }) 
       } : null 
      } 
     </section> 
    )