TypeScript中Dialog等组件提示‘不能作为JSX组件’的解决方法

问题现象 #

使用Material-UI的Dialog、DialogContent、DialogContentText、DialogTitle组件，以及自定义的CropperDemo组件时，出现TypeScript报错：

'Dialog' cannot be used as a JSX component.

相关代码 #

import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import CropperDemo from "./cropper";

export default function Popup({ open, image, handleClose, getCroppedFile }) {
  return (
    <div>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title">Crop Image</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-description">
            <CropperDemo
              handleClose={handleClose}
              src={image}
              getCroppedFile={getCroppedFile}
            />
          </DialogContentText>
        </DialogContent>
      </Dialog>
    </div>
  );
}

解决步骤（新手友好） #

1. 检查版本兼容性 #

这类报错大多是Material-UI（MUI）与React、TypeScript的版本不匹配导致的：

• 打开项目根目录的package.json，确认react、react-dom版本≥17.0.0，typescript版本≥4.1.0，@mui/material版本为v5（v4和v5的导入方式、依赖逻辑不同）
• 如果版本不达标，运行以下命令升级：

  # 升级React和ReactDOM到最新稳定版
  npm install react@latest react-dom@latest
  # 升级TypeScript
  npm install typescript@latest --save-dev
  # 升级MUI及依赖（MUI v5需要emotion支持）
  npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
  

2. 清理依赖缓存并重装 #

缓存或损坏的依赖也会触发类型错误：

• 删除项目里的node_modules文件夹、package-lock.json（或yarn.lock）文件
• 重新安装依赖：npm install（或yarn install）
• 清理TypeScript缓存：npx tsc --clean
• 重启你的开发服务器（比如npm start）

3. 检查自定义组件CropperDemo的类型 #

自定义组件如果没有正确的类型定义，可能引发连锁JSX类型报错：

• 打开./cropper文件，确保组件是标准React组件，并定义正确的Props类型：

  import React from 'react';
  
  // 定义组件接收的props类型
  interface CropperDemoProps {
    handleClose: () => void;
    src: string;
    getCroppedFile: (file: File) => void;
  }
  
  // 用React.FC明确组件类型
  const CropperDemo: React.FC<CropperDemoProps> = ({ handleClose, src, getCroppedFile }) => {
    // 你的组件逻辑
    return <div>裁剪组件内容</div>;
  };
  
  export default CropperDemo;
  

• 如果使用了第三方裁剪库（比如react-easy-crop），记得安装对应类型包：npm install @types/react-easy-crop --save-dev

4. 调整TypeScript配置 #

修改tsconfig.json的compilerOptions，避免类型检查冲突：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 适配React 17+的自动JSX转换
    "esModuleInterop": true,
    "skipLibCheck": true, // 跳过第三方库的类型检查，规避部分库的类型定义问题
    "moduleResolution": "node"
  }
}

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