React+TypeScript中对象内JSX元素解析错误求助

问题核心 #

你遇到的Parsing error: '>' expected错误，本质是ESLint未能正确解析对象字面量中的JSX语法，同时TypeScript的类型推断也因解析异常出现问题。以下是针对性的解决方法：

1. 修正ESLint解析器配置 #

确保ESLint使用@typescript-eslint/parser解析TSX文件，开启JSX支持并关联tsconfig.json以获取完整类型上下文。

修改项目根目录的.eslintrc.json（或.eslintrc.js）：

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "react"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime"
  ]
}

2. 显式指定对象的联合类型 #

给fieldObject明确标注InputField类型，强制TypeScript进行严格类型检查，同时帮助ESLint正确识别对象内的JSX元素：

const fieldObject: InputField = {
  key: `existingClient`,
  type: `button`,
  innerText: "Next Step",
  icon: <HiArrowLongRight />,
  group: 3,
  element: "button",
  event: () => {},
};

3. 改用函数返回图标元素（兼容方案） #

如果上述方法仍无效，可将icon属性改为返回JSX元素的函数，延迟图标元素的创建，绕过解析阶段的语法识别问题：

修改类型定义：

type InputField =
  // ... 联合类型的其他部分 ...
  | {
      key: string;
      type?: "button" | "submit" | "reset";
      innerText: string;
      icon?: () => JSX.Element; // 改为函数类型
      group: number;
      element: "button";
      event: (e: React.MouseEvent<HTMLButtonElement>) => void;
    };

更新对象定义：

const fieldObject: InputField = {
  key: `existingClient`,
  type: `button`,
  innerText: "Next Step",
  icon: () => <HiArrowLongRight />, // 用函数返回图标
  group: 3,
  element: "button",
  event: () => {},
};

调整渲染逻辑：

case "button":
  return (
    <button onClick={field.event} type={field.type}>
      {field.innerText}
      {field.icon && <span className={styles.icon}>{field.icon()}</span>} {/* 调用函数 */}
    </button>
  );

4. 更新依赖版本 #

旧版本的react-icons、@typescript-eslint工具链可能存在兼容性问题，执行以下命令更新到最新稳定版：

npm update react-icons @typescript-eslint/parser @typescript-eslint/eslint-plugin

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