reactjs - React Reveal 不适用于数据数组

Question

无法通过 .map() 对数据数组使用 React Reveal 以从文档中产生效果。

https://www.react-reveal.com/examples/common/

他们的文档给出了一个很好的例子

   <Fade left cascade>
         <div>
            <h2>React Reveal</h2>
            <h2>React Reveal</h2>
            <h2>React Reveal</h2>
         </div>
    </Fade>

我想用我的数据产生相同的 CASCADE 效果

<React.Fragment>
  {projects.filter(project => project.category === category)
    .map((project, index) => {
           return (
               <ProjectThumb key={index} project={project} 
               showDetails={showDetails}/>
        )
    })}
</React.Fragment>

我得到的效果是整个 ProjectThumb 组件列表淡入一组，我需要它们单独淡入并在我滚动时淡入。提前致谢。

Answer 1

将 props传递react-reveal给你的 React 组件。它会起作用的。

<Fade left cascade>
         <div>
            {
              projects
                .filter(project => project.category === category)
                .map((project, index) => (
                     <ProjectThumb key={index} project={project} showDetails={showDetails} />
                ))
            }
         </div>
</Fade>

在你的ProjectThumb.js

const ProjectThumb = props => {
   return <Whatever {...props}>{...}</Whatever>
}