React中通过props传递组件遇类型/解析错误，如何解决？

问题场景 #

你编写了SomeComponent组件，期望通过component属性接收React组件或原生HTML元素（IntrinsicElement）并渲染，但遇到以下报错：

Parsing error: '>' expected.eslint
'Component' refers to a value, but is being used as a type here. Did you mean 'typeof Component'?ts(2749)
type Component = /unresolved/ any

你的源码及期望用法如下：

import type { ElementType } from 'react';

function SomeComponent({ component: Component }: { component: ElementType }) {
  return (<Component />);
}

//
// 期望的使用方式:
//

const usage1 = <SomeComponent component="div" />;

function MyComponent() {
  return 123;
}

const usage2 = <SomeComponent component={MyComponent} />;

错误原因 #

1. 文件格式不匹配：你在.js文件中使用了TypeScript的类型导入（import type）和类型注解语法，而JavaScript文件默认不支持TypeScript语法，导致ESLint和TypeScript解析出错。
2. 类型定义未正确加载：ElementType是React提供的TypeScript类型，若项目未安装React的类型定义包，会出现类型无法解析的问题。

修复方案 #

方案一：改用TSX文件（推荐） #

这是最直接的解决方式，步骤如下：

1. 将文件扩展名从.js改为.tsx，确保TypeScript和ESLint能正确识别JSX语法与TypeScript类型。
2. 确保项目已安装React类型定义包，若未安装，执行以下命令：

npm install @types/react --save-dev
# 或使用yarn
yarn add @types/react --dev

3. 调整ESLint配置以支持TSX文件（若项目使用ESLint）：
   • 安装TypeScript ESLint插件：

     npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
     

   • 在.eslintrc（或.eslintrc.js）中配置：

     module.exports = {
       parser: '@typescript-eslint/parser',
       plugins: ['@typescript-eslint'],
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended'
       ],
       // 其他配置...
     };
     

修复后的完整代码：

import type { ElementType } from 'react';

function SomeComponent({ component: Component }: { component: ElementType }) {
  return <Component />;
}

// 使用示例
const usage1 = <SomeComponent component="div" />;

function MyComponent() {
  return 123;
}

const usage2 = <SomeComponent component={MyComponent} />;

方案二：在JS文件中使用JSDoc标注类型 #

若不想改用TSX文件，可通过JSDoc为JS文件添加类型注解：

/** @typedef {import('react').ElementType} ElementType */

/**
 * @param {{ component: ElementType }} props
 */
function SomeComponent({ component: Component }) {
  return <Component />;
}

// 使用示例
const usage1 = <SomeComponent component="div" />;

function MyComponent() {
  return 123;
}

const usage2 = <SomeComponent component={MyComponent} />;

这种方式无需修改文件扩展名，但类型提示的体验不如TSX完善。

内容的提问来源于stack exchange，提问作者Page not found