我正在尝试使用 Framer Motion 在 React 中制作组件轮播。孩子AnimatePresence
需要一个键,所以我决定传递一个页面状态作为键。但是,这样做会使我尝试渲染的组件重复。我认为这是因为密钥最终会被重用,所以我制作了一个函数,生成一个随机字符串用作密钥,但这也复制了组件。
使用轮播的组件
const ProjectList = props => {
const [page, setPage] = useState(0);
const projects = [
<Project
name="Example"
desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Libero nunc consequat interdum varius sit amet."
image={require("../img/exampleproject.png")}
/>,
<Project
name="Example2"
desc="Another example. This one does nothing too. What a suprise!"
image={require("../img/exampleproject.png")}
/>
]
const genKey = () => {
return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
}
const paginate = (newPage) => {
setPage(newPage)
}
return (
<div className="project-list">
<AnimatePresence>
<motion.button key={genKey()} onClick={() => paginate(page-1)}>
<ArrowBackIosIcon/>
</motion.button>
<motion.div key={genKey()} className="project-list"
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
>
{projects[page]}
</motion.div>
<motion.button key={genKey()} onClick={() => paginate(page+1)}>
<ArrowForwardIosIcon/>
</motion.button>
</AnimatePresence>
</div>
);
我不确定如何在片段编辑器中使用像 Framer Motion 这样的库,所以我把它放在了 CodeSandbox
当我不使用键时,它按预期工作,但是每当我单击其中一个箭头按钮时,它都会引发以下警告
PS我知道最终页面值将超出长度的范围projects
,我计划在我可以解决这个问题后修复它。