Question

我在按钮点击时渲染更多列表项时遇到问题。目前我渲染了3个项目并且点击了我想在之前的项目上渲染另外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>
)

} 我怎样才能实现它？

Answer 1

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

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>
  )
}

或者您也可以使用简单的布尔值。像：

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>
)

我还没有对代码进行测试，但应该让你朝着正确的方向前进。

如何在按钮单击时渲染更多列表元素 - Meteor / React

1 个答案: