TypeScript函数组件传Props报错：无法作为JSX组件使用

问题原因 #

1. React组件props接收方式错误：React函数组件要求props是单一对象参数，但你把MobileHeader定义成接收两个独立的boolean参数，和组件调用时传递的props对象完全不匹配，导致TypeScript类型校验失败。
2. 接口名拼写错误：App组件里的参数类型写成了MobileHeaderProp，正确的应该是你定义的MobileHeaderProps（少了末尾的s）。

解决步骤 #

1. 修正MobileHeader组件的props接收逻辑 #

将组件改为接收一个符合MobileHeaderProps接口的对象参数，使用解构赋值直接取出需要的属性：

import { useState } from 'react';
// 记得导入你的图标文件
import hamburgerIcon from './assets/path/to/hamburger-icon.png';

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

// 接收单个props对象并解构
function MobileHeader({ activeHeader, activeMenu }: MobileHeaderProps) {
  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>
  );
}

2. 修正App组件的类型注解 #

把App组件的参数类型改为正确的MobileHeaderProps，同时调整state初始化逻辑（如果不需要外部传入props，也可以直接初始化state为默认值）：

export default function App(props: MobileHeaderProps) {
    // 用传入的props初始化内部状态，或者直接使用props的值
    const [activeHeader, setActiveHeader] = useState(props.activeHeader);
    const [activeMenu, setActiveMenu] = useState(props.activeMenu);
    
    return (
      <MobileHeader 
        activeHeader={activeHeader}
        activeMenu={activeMenu}
      />
    )
}

额外优化点 #

• 代码中hidden={!(activeHeader)}可以简化为hidden={!activeHeader}，逻辑完全一致，更简洁。
• 确保所有用到的资源（比如hamburgerIcon）都正确导入，避免出现未定义错误。

内容的提问来源于stack exchange，提问作者John Doe