JSX 元素类不支持属性，因为它没有“道具”property.ts(2607)

Posted 2023-02-21

【中文标题】JSX 元素类不支持属性，因为它没有“道具”property.ts(2607)

【英文标题】：JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

【发布时间】：2021-11-12 03:14:17

【问题描述】：

我在使用 react-easy-crop 库中的“Cropper”时遇到此错误，我尝试了一些在论坛上找到的东西，例如添加 @types/react、从“react”导入 * 作为 React 但是似乎没有任何效果。

这是给我带来麻烦的代码：

import * as React from "react";
import Cropper from "react-easy-crop";

export default function CropperPage(action , valuePro: any) 
   return (
     <Cropper //  <-- This is giving me the error
        cropShape= "round"
        disableAutomaticStylesInjection="true"
        image=image
        crop=crop
        zoom=zoom
        aspect=1
        onCropChange=setCrop
        onZoomChange=setZoom
        onCropComplete=onCropComplete
    />
   );

整个错误信息是：

块引用 'Cropper' 不能用作 JSX 组件。 它的实例类型“Cropper”不是有效的 JSX 元素。 “Cropper”类型缺少“ElementClass”类型的以下属性：context、setState、forceUpdate、props、refsts(2786) （别名）类作物 进口作物

【参考方案1】：

import Cropper from "react-easy-crop";

interface CropperFix extends React.Component 

const Cropped = (Cropper as any) as 
    new(): CropperFix;
;

const props: any = 
    cropShape: "round",
    disableAutomaticStylesInjection: true,
    image,
    crop,
    zoom,
    aspect: 1,
    onCropChange: setCrop,
    onZoomChange: setZoom,
    onCropComplete: onCropComplete,


...

<Cropped ...props/>

可能很难看，但有效

【讨论】：

任何澄清？它的作用以及如何解决类似问题？