JSX 元素 class 不支持属性，因为它没有 'props' property.ts(2607)

Question

我在使用 react-easy-crop 库中的“Cropper”时遇到此错误，我尝试了一些我在论坛上发现的东西，例如添加 @types/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}
    />
   );
}

整个错误信息是：

Blockquote JSX element class does not support attributes because it does not have a 'props' property.ts(2607) 'Cropper' cannot be used as a JSX component. Its instance type 'Cropper' is not a valid JSX element. Type 'Cropper' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, refsts(2786) (alias) class Cropper import Cropper

Answer 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/>

可能丑陋但有效

JSX 元素 class 不支持属性，因为它没有 'props' property.ts(2607)

JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

javascript

html

reactjs

jsx

tsx