说明
我想用framer motion动画一个nextjs Link组件。我也在使用TypeScript,它一直给我一个类型错误:Property 'Link' does not exist on type '(<Props extends {}>(Component: string | ComponentType<PropsWithChildren<Props>>, customMotionComponentConfig?: CustomMotionComponentConfig | undefined) => CustomDomComponent<...>) & HTMLMotionComponents & SVGMotionComponents'. Did you mean 'link'?
代码
这是我正在制作的组件。
export default function Button({ href, text, type, ...props }: ButtonTypes) {
console.log(styles);
if (href) {
return (
<motion.Link
href={href}
type={type}
className={`${styles['neon-button']} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aquamarine`}
{...props}
>
{text}
</motion.Link>
);
}
return (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
type={type}
className="neon-button focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aquamarine"
{...props}
>
{text}
</motion.button>
);
}
期望
当我添加whileHover和whileTap属性时,组件会显示动画,但显然我需要消除类型错误。
2条答案
按热度按时间xytpbqjk1#
TypeScript错误是由于
<motion.Link>
不存在于Motion的API中。Motion只支持DOM原语(基本的HTML元素,如<a>
和<button>
,这就是为什么motion.button
可以正常工作),而Link
是一个NextJS组件。有关https://www.framer.com/motion/component/#custom-components如何创建 Package NextJS的
Link
组件的自定义Motion组件,请参见www.example.com。这也将消除TS错误。6ss1mwsb2#
我以前遇到过类似的问题,一个可能的解决方法是将下一个链接 Package 在div中,并在其上使用帧运动。