使用react-easy-crop的Cropper组件报TS2607无props属性错误如何解决

报错原因 #

该报错是组件类型校验不通过导致，由类型定义冲突、属性类型传错、依赖版本不一致三类常见问题触发，可按以下步骤依次排查修复：

• 第一步：卸载冗余的第三方类型包
  新版react-easy-crop已内置TypeScript类型定义，如果你单独安装了@types/react-easy-crop会造成类型冲突，执行以下命令卸载即可：

  # npm
  npm uninstall @types/react-easy-crop
  # yarn
  yarn remove @types/react-easy-crop
  # pnpm
  pnpm remove @types/react-easy-crop
  

• 第二步：修正错误的属性类型
  你代码中disableAutomaticStylesInjection="true"传入的是字符串，该属性要求传入布尔值，修改为：

  disableAutomaticStylesInjection={true}
  

  同时请确保组件内已声明image、crop、zoom、setCrop、setZoom、onCropComplete等你用到的变量和方法，未定义的变量也会触发类型报错。
• 第三步：解决依赖版本冲突
  如果前两步操作后报错仍存在，大概率是项目内存在多个版本的@types/react依赖冲突，删除项目根目录下的node_modules文件夹，以及package-lock.json/yarn.lock/pnpm-lock.yaml锁文件，重新执行依赖安装命令即可。
• 第四步：临时类型规避方案
  如果上述操作均无效，可通过类型断言绕开类型校验，修改导入代码如下：

  import * as React from "react";
  import Cropper from "react-easy-crop";
  // 类型断言修复类型不匹配问题
  const TypedCropper = Cropper as unknown as React.ComponentType<React.ComponentProps<typeof Cropper>>;
  
  export default function CropperPage({action , valuePro}: any) {
    // 这里补充你自己的状态定义，示例如下：
    // const [crop, setCrop] = React.useState({x: 0, y: 0})
    // const [zoom, setZoom] = React.useState(1)
    // 其余变量也要自行声明
    return (
      <TypedCropper
        cropShape="round"
        disableAutomaticStylesInjection={true}
        image={image}
        crop={crop}
        zoom={zoom}
        aspect={1}
        onCropChange={setCrop}
        onZoomChange={setZoom}
        onCropComplete={onCropComplete}
      />
    );
  }
  

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