Reactjs 财产'；类名'；类型'中缺少；{}'；但类型为'；IProps&x27；

我想给孩子们上几节课

出于某种原因，道具似乎没有流传下来

我有一个父组件：

import React from "react";
import Logo from "./Logo";
import SidebarMenu from "./SidebarMenu";

interface IProps {
  className: string;
}

function Sidebar(props: IProps) {
  return (
    <aside className={`h-screen bg-gray-200 ${props.className}`}>
      <div className="my-4">
        <Logo className="w-0" />
      </div>

      <div className="my-4">
        <SidebarMenu />
      </div>
    </aside>
  );
}


export default Sidebar;

import React from "react";
import logo from "../assets/images/logo.png";

interface IProps {
  className: string;
}

function Logo(props: IProps) {
  return (
    <img
      src={logo}
      alt="project vdora logo"
      className={`rounded max-w-full ${props.className}`}
    />
  );
}

export default Logo;

从“React”导入React；
从“/Logo”导入徽标；
从“/SidebarMenu”导入SidebarMenu；
接口IProps{
类名：string；
}
功能侧栏（道具：IProps）{
返回(
);
}
导出默认边栏；

以及儿童徽标组件：

import React from "react";
import Logo from "./Logo";
import SidebarMenu from "./SidebarMenu";

interface IProps {
  className: string;
}

function Sidebar(props: IProps) {
  return (
    <aside className={`h-screen bg-gray-200 ${props.className}`}>
      <div className="my-4">
        <Logo className="w-0" />
      </div>

      <div className="my-4">
        <SidebarMenu />
      </div>
    </aside>
  );
}


export default Sidebar;

import React from "react";
import logo from "../assets/images/logo.png";

interface IProps {
  className: string;
}

function Logo(props: IProps) {
  return (
    <img
      src={logo}
      alt="project vdora logo"
      className={`rounded max-w-full ${props.className}`}
    />
  );
}

export default Logo;

从“React”导入React；
从“./assets/images/logo.png”导入徽标；
接口IProps{
类名：string；
}
功能标识（道具：IProps）{
返回(
);
}
导出默认徽标；

我得到一个错误：

TypeScript error in .../src/components/Login.tsx(63,16):
Property 'className' is missing in type '{}' but required in type 'IProps'.  TS2741

    61 |           <Card className="p-4 bg-green-900">
    62 |             <div className="mb-4">
  > 63 |               <Logo />
       |                ^
    64 |             </div>

TypeScript错误在…/src/components/Login.tsx（63,16）中：
类型“{}”中缺少属性“className”，但类型“IProps”中需要属性“className”。TS2741
61 |           
62 |             
> 63 |               
|                ^
64 |             

尝试的解决方案：

TypeScript error in .../src/components/Login.tsx(63,16):
Property 'className' is missing in type '{}' but required in type 'IProps'.  TS2741

    61 |           <Card className="p-4 bg-green-900">
    62 |             <div className="mb-4">
  > 63 |               <Logo />
       |                ^
    64 |             </div>

我试着让

类名

成为可选的，然后它就开始工作了

If让我困惑，因为我在祖父母组件中使用了完全相同的方法，并且它正常工作

---

为什么没有通过？如何修复？

对于

Logo

组件，您提到的道具类型为

IProps

，其中的className是必填字段。对于

侧栏

组件，您做得很好，但对于

登录

组件，您做得不好。（您在…/src/components/Login.tsx（63,16）中得到错误

TypeScript错误：

）

是的，我也有登录组件。我在Logo optionas>className？：string中创建了className，供阅读本文的任何人使用