Typescript 道具隐藏到 javascript 道具

Question

I need to use this directionLeft in the javascript file. currently in is in the typescript file. I need to know how to pass these props in the JSX file. Please help me to do that.

  import React from "react";
    import { motion } from "framer-motion";
    import image from "../public/img/me.jpg";
    import Image from "next/image";
    
    type props = {
        directionLeft?: Boolean;
    }
    
    function Skill({directionLeft}: props) {
      return (
        <div className="group relative flex cursor-pointer">
          <motion.div
            initial={{
              x: directionLeft ? -200 : 200,
              opacity: 0,
            }}
            transition={{ duration: 1 }}
            whileInView={{
              opacity: 1,
              x: 0,
            }}
          >
            <Image
              src={image}
              className="rounded-full border"/>
          </motion.div>
        </div>
      );
    }
    
    export default Skill;

Answer 1

You can use it simply in the JSX file:

    import React from "react";
    import { motion } from "framer-motion";
    import image from "../public/img/me.jpg";
    import Image from "next/image";
    
    function Skill({directionLeft}) {
      return (
        <div className="group relative flex cursor-pointer">
          <motion.div
            initial={{
              x: directionLeft ? -200 : 200,
              opacity: 0,
            }}
            transition={{ duration: 1 }}
            whileInView={{
              opacity: 1,
              x: 0,
            }}
          >
            <Image
              src={image}
              className="rounded-full border"/>
          </motion.div>
        </div>
      );
    }
    
    export default Skill;