如何使用 React 顺序显示项目列表

Question

我想显示整个里程碑数组，但我需要按顺序显示。 例如：先出现milestones[0]，然后出现milestones[1]，再出现milestones[2]，以此类推。

所以我有一个milestones.map() 来为每个里程碑创建一张卡片，并尝试添加一个settimeout 以“减慢”.map()，但这不起作用。

更形象化，I have this 和 I need this

这是我的代码：

return (
   <TransitionGroup className='listOfMilestones'>
       {milestones.map((milestone) => {
          return (
             <CSSTransition
             key={milestone.id}
             timeout={500}
             classNames='eachMilestone'
             >
                <MilestoneCard
                  ageRange={ageRange}
                  id={milestone.id}
                  title={milestone.title}
                  answer={milestone.answer}
                 />
             </CSSTransition>
           }
      }
   </TransitionGroup>
)

这是 CSS：

.eachMilestone-enter {
  opacity: 0.01;
  transform: translateY(40px);
}

.eachMilestone-enter-active {
  opacity: 1;
  transform: translateY(0px);
  transition: 500ms ease-in;
}

Answer 1

因此，您似乎需要超时以增加 milestones 中的每个项目。也许使用来自map 的索引并执行类似的操作

timeout={500 + 100 * i}

第一个项目会有 500 毫秒超时，第二个是 600 毫秒，以此类推。您可以根据自己的意愿对其进行调整以延迟。