List 如何在单击按钮时呈现列表中的更多元素-Meteor/React

我在单击按钮时呈现更多列表项时遇到问题。目前，我渲染了3个项目，单击我想在先前的项目上渲染另外3个项目

假设用户看到列表的前三项（药物/膳食/活动），当单击右箭头按钮（当前注释为睡眠/香烟/酒精）时，用户希望检查另外三项。我想给的可能性，使前3对按钮与左箭头类和下3对按钮与右箭头类。我试过各种各样的东西，但没有找到答案

render () {
const medicinesTaken = this.getMedicinesTaken()
const mealsConsumed = this.getMealsConsumed()
const activitiesMinutes = this.getActivitiesMinutes()
const hoursSlept = this.getHoursSlept()
const cigarettesSmoked = this.getCigarettesSmoked()
const alcoholDrunk = this.getAlcoholDrunk()
return (
  <div>
    <button className='arrow-left' />
    <ul className='list-icons list-inline'>
      <li className='calendar-icon'>
        <Medicines medicinesTaken={medicinesTaken} increment={this.incrementMedicines}
          decrement={this.decrementMedicines} />
      </li>
      <li className='calendar-icon'>
        <Meals mealsConsumed={mealsConsumed} increment={this.incrementMeals} decrement={this.decrementMeals} />
      </li>
      <li className='calendar-icon'>
        <Activities activitiesMinutes={activitiesMinutes} increment={this.incrementActivities}
          decrement={this.decrementActivities} />
      </li>
      {/*<li className='calendar-icon'>*/}
        {/*<Sleep hoursSlept={hoursSlept} increment={this.incrementSleep}*/}
          {/*decrement={this.decrementSleep} />*/}
      {/*</li>*/}
      {/*<li className='calendar-icon'>*/}
        {/*<Cigarettes cigarettesSmoked={cigarettesSmoked} increment={this.incrementCigarettes}*/}
          {/*decrement={this.decrementCigarettes} />*/}
      {/*</li>*/}
      {/*<li className='calendar-icon'>*/}
        {/*<Alcohol alcoholDrunk={alcoholDrunk} increment={this.incrementAlcohol}*/}
          {/*decrement={this.decrementAlcohol} />*/}
      {/*</li>*/}
    </ul>
    <button className='arrow-right' />
  </div>
)

render（）{
const medicinesTaken=this.getMedicinesTaken（）
const mealsconsumerd=this.getmealsconsumerd（）
const activitiesMinutes=this.getActivitiesMinutes（）
const hoursleep=this.gethoursleep（）
const cigarettestsmoked=this.getcigarettestsmoked（）
const alcoholdeunded=this.getalcoholdeunded（）
返回(






我会将元素添加到数组中，然后使用索引显示下一项

state = {
   array: [
     <Medicines medicinesTaken={medicinesTaken} increment={this.incrementMedicines}
          decrement={this.decrementMedicines} />,
     <Meals mealsConsumed={mealsConsumed} increment={this.incrementMeals} decrement={this.decrementMeals} />,
     <Activities activitiesMinutes={activitiesMinutes} increment={this.incrementActivities}
          decrement={this.decrementActivities} />,
     <Sleep hoursSlept={hoursSlept} increment={this.incrementSleep}
          decrement={this.decrementSleep} />,
     <Cigarettes cigarettesSmoked={cigarettesSmoked} increment={this.incrementCigarettes} decrement={this.decrementCigarettes} />,
     <Alcohol alcoholDrunk={alcoholDrunk} increment={this.incrementAlcohol} decrement={this.decrementAlcohol} />
   ],

   startFrom: 0
}

render() {

  const items = []
  for(let i = this.state.startFrom; i < this.state.array.length; i++) {
    items.push(<li>this.state.array[i]<li>);
  }
  return (
    <div>
      <button className='arrow-left' onClick={() => this.setState({startFrom: this.state.startFrom - 3)}/>
      <ul className='list-icons list-inline'>
        {items}
      </ul>
      <button className='arrow-right' onClick={() => this.setState({startFrom: this.state.startFrom + 3)}/>
    </div>
  )
}

状态={
数组：[
,
,
,
,
,
],
起始日期：0
}
render（）{
常量项=[]
for（设i=this.state.startFrom；ithis.state.array[i]
）；
}
返回(
this.setState（{startFrom:this.state.startFrom-3）}/>

{items}

this.setState（{startFrom:this.state.startFrom+3）}/>
)
}

或者你也可以用简单的布尔值来做。比如：

state = {
  firstThree: true
}

render () {
const {firstThree} = this.state;
const medicinesTaken = this.getMedicinesTaken()
const mealsConsumed = this.getMealsConsumed()
const activitiesMinutes = this.getActivitiesMinutes()
const hoursSlept = this.getHoursSlept()
const cigarettesSmoked = this.getCigarettesSmoked()
const alcoholDrunk = this.getAlcoholDrunk()
return (
  <div>
    <button className='arrow-left' onClick={() => this.setState({firstThree: true})} />
    <ul className='list-icons list-inline'>
      {
         firstThree && <li className='calendar-icon'>
        <Medicines medicinesTaken={medicinesTaken} increment={this.incrementMedicines} decrement={this.decrementMedicines} />
         </li>
      }
      {
         firstThree &&
         <li className='calendar-icon'>
        <Meals mealsConsumed={mealsConsumed} increment={this.incrementMeals} decrement={this.decrementMeals} />
      </li>
      }

      {
        firstThree && 
        <li className='calendar-icon'>
        <Activities activitiesMinutes={activitiesMinutes} increment={this.incrementActivities}
          decrement={this.decrementActivities} />
      </li>
      }
      {
        !firstThree &&
        <li className='calendar-icon'>*/}
           <Sleep hoursSlept={hoursSlept} increment= {this.incrementSleep} decrement={this.decrementSleep} />
        </li>
      }
      {
         !firstThree &&
         <li className='calendar-icon'>
           <Cigarettes cigarettesSmoked={cigarettesSmoked} increment={this.incrementCigarettes} decrement={this.decrementCigarettes} />
         </li>
      }
      {
         !firstThree &&
         <li className='calendar-icon'> 
           Alcohol alcoholDrunk={alcoholDrunk} increment={this.incrementAlcohol} decrement={this.decrementAlcohol} />
         </li>
      }
    </ul>
    <button className='arrow-right' onClick={() => this.setState({firstThree: false})}/>
  </div>
)

状态={
前三名：对
}
渲染（）{
const{firstThree}=this.state；
const medicinesTaken=this.getMedicinesTaken（）
const mealsconsumerd=this.getmealsconsumerd（）
const activitiesMinutes=this.getActivitiesMinutes（）
const hoursleep=this.gethoursleep（）
const cigarettestsmoked=this.getcigarettestsmoked（）
const alcoholdeunded=this.getalcoholdeunded（）
返回(
this.setState（{firstThree:true}}/>

{
前三个&&li className='calendar-icon'>

}
{
前三名&&


}
{
前三&&


}
{
！前三名&&
*/}

}
{
！前三名&&


}
{
！前三名&&

酒精醉酒={酒精醉酒}增量={this.increment酒精}减量={this.decrementAlcohol}/>

}

this.setState（{firstThree:false}}/>
)

我还没有测试代码，但应该能让您找到正确的方向。
我可能会设置初始状态，比如说firstThreeItems:true，secondThreeItems:false，并在单击按钮时更改这些值，然后检查状态，并相应地将其呈现为状态，但我认为一定有更好的解决方案。我明天会检查它，我会得到back谢谢你。谢谢你的参与。谢谢。没问题，在你评论时也编辑了答案。也可以这样做。@Rachomir如果让我说我将有多于6个元素？-9或12个。在这种情况下，我认为这个逻辑不起作用。我的意思是单击上一个/下一个箭头将不会显示正确的数组元素。Em I right？@Rachomir然后你可以使用循环的第一个解决方案。我将编辑我的答案，使其成为通用答案。因此，你只需要在右键单击时添加3，在左键单击时减去3。