React中如何指定导出函数不被识别为JSX组件？

问题根源 #

在.tsx文件中，TypeScript若无法明确区分普通函数与JSX组件（比如函数返回类型模糊时），会误将普通函数识别为JSX组件。而JSX组件默认仅接收props对象作为参数，这就导致你调用pay(10)时触发"expected 0 arguments but got 1"的类型错误。

解决方法 #

• 明确标注函数返回类型
  给pay函数添加清晰的返回类型声明，让TypeScript明确这是普通异步函数而非组件：

  export async function pay(price: number): Promise<number> {
    // 你的业务逻辑代码
    return 0;
  }
  

• 分离普通函数与组件文件
  将pay这类非组件函数抽离到单独的.ts文件中，不要和函数式组件放在同一个.tsx文件内。纯TypeScript文件不会触发JSX相关的类型判断逻辑，从根源避免误判。

• 确认导入导出方式正确
  确保导入时使用命名导入：

  import { pay } from './你的文件路径';
  

  同时保持函数的命名导出方式，避免导入时的类型混淆。

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