绑定元素“x”隐式具有“any”类型

Question

我一直致力于通过使用教程文章（ https://www.mikealche.com/software-development/learn-react-animations-by-creating-）构建导航栏来尝试学习和理解 Nextjs 和 TypeScript条纹菜单）。

尽管事实上菜单项似乎在本地工作并且下划线动画出现并跟随鼠标悬停（这是我在文章中了解到的），但我仍然遇到以下问题：

1. 菜单项.tsx
   • 绑定元素“text”隐式具有“any”类型。ts(7031) [6,21]
   • 绑定元素“children”隐式具有“any”类型。ts(7031) [6,27]
2. 子项.tsx
   • 参数“title”隐式具有“any”类型。ts(7006) [4,18]
   • 参数“text”隐式具有“any”类型。ts(7006) [4, 25]
3. 子项容器.tsx
   • 绑定元素“children”隐式具有“any”类型。ts(7031) [3,29]

我对 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;

子项容器.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;

Answer 1

虽然 Typescript 在大多数情况下都能够推断类型，但它无法对 React props 执行此操作，甚至对于子 props 也是如此。

XXX implicitly has an 'any' type要删除代码中的所有内容，您需要为使用您自己的 propsReact.FC的组件添加一个（代表功能组件）。childrenReact.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 }) => {

[...]

子项容器.tsx

[...]

// Only add React.FC 
const SubItemContainer: React.FC = ({ children }) => { type

[...]