React js内の条件付きレンダリング

Question

レンダリング時に条件を追加しましたが、突然表示が停止します。ここでコードは使用しています。

{this.state.sdata.map((sdata, i) => 
    {i < 5 && 
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
    } 
) 
} 

sdataから4つのアイテムしか表示しません。誰でも助けてください。

Answer 1

あなたは私> = 5だけでなく、あなたがarrayのすべてのエントリのためにreturn nullに必要として後、map体から要素をreturnのを忘れていました。このような

書き込み、それを：

{this.state.sdata.map((sdata, i) => { 
     if(i < 5) 
      return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
     return null; 
    }) 
} 

が、私はあなたが唯一の5つの要素を作成するために、for loop代わりのmapを使用することをお勧めします。

あなたは、最初にその上mapを使用sliceを使用すると、サブarray 5の要素を作成mapを使用したい場合。このよう

：

{this.state.sdata.slice(0,5).map((sdata, i) => { 
    return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
})} 

Answer 2

{this.state.sdata.map((sdata, i) => 
    (i < 4 && 
     <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
    ) 
    ) 
} 

ちょうど私がすることができます0

Answer 3

で始まるので、あなたが4未満を提供する必要が上に示したように()で{}を交換し、4データを表示します条件付きレンダリングの代替案をここから試してみてください：https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

基本的には、 nditional」コンポーネント、およびようにそれを使用します。

<Conditional if={this.state.something}> 
    <div>hello!</div> 
<Conditional> 

ので、<div>hello!</div>はthis.state.somethingがtrueの場合にのみレンダリングされようとしています。

あなたの例では、それはこの方法で実装する必要があります。

{ 
    this.state.sdata.map((sdata, i) => 
    <Conditional if={i < 5}> 
     <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
    <Conditional> 
} 

はとにかく、唯一の5つの要素を表示するための最良の方法は、実行することです： 基本的には、配列から最初の5つの要素を取得し、その配列の.mapを実行します。

{ 
    this.state.sdata.slice(0, 5).map((sdata, i) => 
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} /> 
}