如何在TypeScript中向函数组件传递props？我收到一个错误，说它的类型不是一个有效的JSX元素类型

前端开发 2026-07-10

错误：
Type '{ activeHeader: boolean; activeMenu: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'.

'MobileHeader' cannot be used as a JSX component.
  Its type '(activeHeader: boolean, activeMenu: boolean) => Element' is not a valid JSX element type.
    Type '(activeHeader: boolean, activeMenu: boolean) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
      Target signature provides too few arguments. Expected 2 or more, but got 1.

代码：

import { useState } from 'react';

interface MobileHeaderProps {
  activeHeader: boolean;
  activeMenu: boolean;
} 

function MobileHeader(activeHeader: boolean, activeMenu: boolean) {
  console.log("Active Header: " + activeHeader);

  return (
    <header className="[ grid ] [ p-5 ] [ min-h-[650px] w-screen ] [ bg-[url(assets/images/mobile/image-hero.jpg)] bg-center bg-cover bg-no-repeat ]">
        <section hidden={!(activeHeader)} aria-hidden={!(activeHeader)} className="[ flex flex-row items-center justify-between ] [ h-min ]">
          <p className="[ text-white text-left ] [ font-medium ]">loopstudios</p>
          <button className="[ rounded-sm p-1 ] [ hover:cursor-pointer hover:bg-indigo-500 ]" aria-label="drop-down menu"><img src={hamburgerIcon} /></button>
        </section>

        <nav hidden={!(activeMenu)} aria-hidden={!(activeMenu)}>
            <ul>
              <li>About</li>
              <li>Careers</li>
              <li>Events</li>
              <li>Products</li>
              <li>Support</li>
            </ul>
        </nav>

        <h1 hidden={!(activeHeader)} aria-hidden={!(activeHeader)} className="[ self-start ] [ uppercase text-4xl text-left text-slate-300 tracking-wider font-light ] [ p-5 ] [ border-2 border-slate-300 ]">Immersive experiences that deliver</h1>
      </header>
  );
}

export default function App(prop: MobileHeaderProp) {
    const [activeHeader, setActiveHeader] = useState(true);
    const [activeMenu, setActiveMenu] = useState(false);

    return (
      <MobileHeader 
        activeHeader={prop.activeHeader}
        activeMenu={prop.activeMenu}
      />
    )
}

我对TypeScript还很新，想参考官方文档以获得更多说明。然而，我对TypeScript的细微差别并不太熟悉，我在想为什么不能像在JavaScript中那样给这个函数组件传props。

我尝试使用接口来定义类型，试图按照文档中的示例来做，但这并没有解决我遇到的问题。

在这个程序中，我试图在 App 中调用函数组件 MobileHeader，但由于出现错误标记，程序无法正常运行。

解决方案

React组件只接受一个参数（props）。它是一个包含所有属性的复杂对象。

你有一个函数，它接受两个参数（props的组成部分）：

function MobileHeader(activeHeader: boolean, activeMenu: boolean) {
  // …
}

相反，你希望直接传递props：

interface MobileHeaderProps {
  activeHeader: boolean;
  activeMenu: boolean;
} 

function MobileHeader(props: MobileHeaderProps) {
  // …
}

或者在函数定义中直接解构：

interface MobileHeaderProps {
  activeHeader: boolean;
  activeMenu: boolean;
} 

function MobileHeader({activeHeader, activeMenu}: MobileHeaderProps) {
  // …
}

请参阅关于传递props的官方React教程。