[英]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.