[英]Typescript props covert to javascript props
我需要在javascript文件中使用这个directionLeft
。 当前在typescript文件中。 我需要知道如何在 JSX 文件中传递这些道具。 请帮助我做到这一点。
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;
您可以在 JSX 文件中简单地使用它:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.