[英]ReactJS :: How to Show Only Relevant Menu Items and Hide Other Menu Items Upon Page Change
[英]ReactJS how to always show only certain number of array items
我想從數組中顯示一定數量的項目,並且當用戶單擊“顯示下一個”時,該數組的下五個項目將是可見的,例如項目6-10,其中項目0-5將被隱藏,例如應該總是只有五個項目可見。 我怎樣才能做到這一點?
我嘗試了以下堅果,但沒有成功(請參見此處的JSFIDDLE )
class Cars extends React.Component{
constructor(){
super()
this.state = {
limit: 5,
cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
}
}
showPreviousCars() {
// show previous 5 items
}
showNextCars(){
this.setState({
limit: this.state.limit + 5
})
}
render(){
let cars = this.state.cars.slice(0,this.state.limit);
return(
<div className="car-wrapper">
<ul>
<li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
{cars.map((car, i) => {
return(
<li key={i}>{car}</li>
)
})}
<li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
</ul>
</div>
)
}
}
歡迎任何建議!
您可以使用Array.prototype.slice
(請參閱此處的文檔以了解要傳遞的參數)來處理部分數組:
cars.slice(this.state.limit, this.state.limit + 5).map(...)
編輯:兩件事:
slice(this.state.limit - 5, this.state.limit)
showNextCars
函數,以確保您不會超出數組范圍 使用偏移量和限制
class Cars extends React.Component{
constructor(props){
super(props)
this.state = {
limit: 5,
offset:0,
cars: ["Audi", "Alfa Romeo", "BMW", "Citroen", "Dacia", "Ford", "Mercedes", "Peugeot", "Porsche", "VW"]
}
}
showPreviousCars() {
// show previous 5 items
}
showNextCars(){
this.setState({
offset:this.state.limit
limit: this.state.limit + 5,
})
}
render(){
let cars = this.state.cars.slice(this.state.offset,this.state.limit);
return(
<div className="car-wrapper">
<ul>
<li><a onClick={this.showPreviousCars.bind(this)}>Previous 5</a></li>
{cars.map((car, i) => {
return(
<li key={i}>{car}</li>
)
})}
<li><a onClick={this.showNextCars.bind(this)}>Next 5</a></li>
</ul>
</div>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.