分享
三行代码  ›  专栏  ›  技术社区  ›  Jordan Baron

使用键时复制组件

  •  0
  • Jordan Baron  · 技术社区  · 1 周前

    我试图使一个组件旋转在反应使用框架运动。的孩子们 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>
      );
    

    我不知道如何在snippet编辑器中使用Framer Motion这样的库,所以我把它放在CodeSandbox上

    Edit priceless-sammet-9w1t3

    warnings

    projects ,我计划一旦我能解决这个问题。

    1 回复  |  直到 1 周前
        1
  •  1
  •   yossefaz    1 周前

    实际上你不需要钥匙。 添加键(而且还添加随机键-就像您在 Math.random() 方法)对于react manage的元素,manage将重写react预定义的键,并可能导致您的程序出现某种呈现错误。

    只有在从数组生成组件(例如使用map函数)时才需要键。

    doc

    键有助于反应确定哪些项已更改、添加或删除。钥匙应该给元素 :

    你不需要这个。

    既然您正在使用这个库: https://www.framer.com/api/motion/animate-presence/#usage

    你必须用一把钥匙。这里的问题是你必须给一个常量键。所以去掉数学随机函数,像我在这里所做的那样,给出一些常量字符串:

    import React, { useState } from "react";
    import Section from "./Section.js";
    import { AnimatePresence, motion } from "framer-motion";
    import Project from "./Project.js";
    import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
    import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
    
    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={
            "https://i.picsum.photos/id/928/600/300.jpg?hmac=ai-33AKRXhJnTcm88ArxRypuNNrfztMdJ-ui_8dhe8c"
          }
        />,
        <Project
          name="Example2"
          desc="Another example. This one does nothing too. What a suprise!"
          image={
            "https://i.picsum.photos/id/258/600/300.jpg?hmac=d-pTq52drP8dj3vsxB72sOgifDUNcookREV33ffONbw"
          }
        />
      ];
    
    
    
      const paginate = newPage => {
        setPage(newPage);
      };
    
      return (
        <div className="project-list">
          <AnimatePresence>
            <motion.button key="img1" onClick={() => paginate(page - 1)}>
              <ArrowBackIosIcon />
            </motion.button>
            <motion.div
              key="img2"
              className="project-list"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              {projects[page]}
            </motion.div>
            <motion.button key="img3" onClick={() => paginate(page + 1)}>
              <ArrowForwardIosIcon />
            </motion.button>
          </AnimatePresence>
        </div>
      );
    };
    
    export default ProjectList;