![](/img/trans.png)
[英]Map typescript parameter: Binding element 'columns' implicitly has an 'any' type
[英]Binding element 'x' implicitly has an 'any' type
我一直在努力尝试通过使用教程文章( https://www.mikealche.com/software-development/learn-react-animations-by-creating- a-stripe-inspired-menu )。
尽管菜单项似乎在本地工作并且下划线 animation 进来并跟随鼠标 hover (这是我在文章中得到的),但我仍然遇到以下问题:
我对 React、NextJs 和 TypeScript 还是很陌生,但我已经慢慢地浏览了文档、视频,并有耐心学习。 但是我不太确定如何解决这个问题,或者找到一种方法来更好地缓解这种情况在未来发生。
我已经继续并发布了下面的文件。
感谢您对此或建议的任何帮助。
导航栏.tsx
import React from "react";
import MenuItem from "./MenuItem";
import SubItem from "./SubItem";
import { motion } from "framer-motion";
const Navbar = () => {
return (
<div className="w-screen p-20">
<motion.div className="flex justify-center p-10 border">
<MenuItem text={"Home"}>
<SubItem title="Product" text="A SaaS for e-commerce" />
<SubItem title="Blog" text="Latest posts" />
<SubItem title="Contact" text="Get in touch" />
</MenuItem>
<MenuItem text={"About"} style={{ minWidth: 400 }}>
<SubItem title="The Team" text="Get to know us better" />
<SubItem title="The Company" text="Since 1998" />
<SubItem
title="Our Mission"
text="Increase the GDP of the internet"
/>
<SubItem title="Investors" text="who's backing us" />
</MenuItem>
<MenuItem text={"Products"} style={{ minWidth: 400 }}>
<SubItem
title="Ecommerce"
text="Unify online and in-person payments"
/>
<SubItem
title="Marketplaces"
text="Pay out globally and facilitate multiparty payments"
/>
<SubItem
title="Platforms"
text="Let customers accept payments within your platform"
/>
<SubItem
title="Creator Economy"
text="Facilitate on-platform payments and pay creators globally"
/>
</MenuItem>
</motion.div>
</div>
);
};
export default Navbar;
菜单项.tsx
import { motion } from "framer-motion";
import { useState } from "react";
import Underline from "./Underline";
import SubItemContainer from "./SubItemContainer";
const MenuItem = ({ text, children, ...props }) => {
const [isBeingHovered, setIsBeingHovered] = useState(false);
return (
<motion.div
className="relative px-10 cursor-pointer"
onHoverStart={() => setIsBeingHovered(true)}
onHoverEnd={() => setIsBeingHovered(false)}
>
<span className="relative">
{text}
{isBeingHovered && <Underline />}
</span>
{isBeingHovered && <SubItemContainer>{children}</SubItemContainer>}
</motion.div>
);
};
export default MenuItem;
子项.tsx
import { Hashicon } from "@emeraldpay/hashicon-react";
import React from "react";
const SubItem = (title, text) => {
return (
<div className="my-2 cursor-pointer group min-w-max">
<div className="flex items-center gap-4">
<Hashicon value={title} size={25} />
<div className="">
<p className="font-bold text-gray-800 group-hover:text-blue-900 text-md">
{title}
</p>
<span className="text-sm font-bold text-gray-400 group-hover:text-blue-400">
{text}
</span>
</div>
</div>
</div>
);
};
export default SubItem;
SubItemContainer.tsx
import { motion } from "framer-motion";
const SubItemContainer = ({ children }) => {
return (
<div className="py-5 min-w-max">
<motion.div
layoutId="menu"
className="absolute border border-1 shadow-lg py-10 px-10 bg-white rounded-box -left-2/4"
style={{ minWidth: 400 }}
initial="hiddens"
animate="visible"
>
{children}
</motion.div>
</div>
);
};
export default SubItemContainer;
虽然 typescript 大部分时间都能够推断类型,但它不能用于 react 道具,即使是儿童道具。
要删除代码中XXX implicitly has an 'any' type
,您需要为使用children
组件的组件添加React.FC
(代表功能组件),并在使用自己的道具时React.FC<ComponentProps>
。
对于您当前的三个组件,您将拥有:
菜单项.tsx
[...]
// Define your component props
type MenuItemProps = {
text: string;
// ...rest of your props
}
// Add props
const MenuItem: React.FC<MenuItemProps> = ({ text, children, ...props }) => {
[...]
子项.tsx
[...]
// Define your component props
type SubItemProps = {
title: string;
text: string;
}
// Add props and fix your code as props is the first parameter
const SubItem: React.FC<SubItemProps> = ({ title, text }) => {
[...]
SubItemContainer.tsx
[...]
// Only add React.FC
const SubItemContainer: React.FC = ({ children }) => { type
[...]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.