React中的條件渲染js

我在渲染中添加了一個條件，並突然停止顯示。這是我正在使用的代碼。React中的條件渲染js

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

我想只顯示來自sdata的4個項目。有人請幫忙。

來源

2017-06-20 Prajila V P

你忘了我> = 5後從map體return元素，以及你需要return null爲array所有條目。

寫這樣的：

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

但我會建議你使用for loop，而不是map創建僅5元。

如果你想使用map然後先用slice和創建5 array子元素，然後使用上map。

像這樣：

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

來源

2017-06-20 10:01:04

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

只需更換{}與()像上面顯示，並顯示出4個數據，你必須提供小於4，因爲我用0.1

來源

2017-06-20 10:08:31

你可以開始也嘗試從這裏有條件渲染的替代方案：https://medium.com/@BrodaNoel/conditional-rendering-in-react-and-jsx-the-solution-7c80beba1e36

基本上，建議是創建一個「Co nditional」組件，並用它喜歡：

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

所以，<div>hello!</div>將要呈現的只有this.state.something是真實的。

在你的榜樣，應該以這種方式來實現：

{ 
    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} /> 
}

來源

2018-02-14 00:20:36

React中的條件渲染js

回答

相關問題