Блог

Я получаю эту ошибку при использовании «Обрезки» из библиотеки react-easy-crop, я попробовал несколько вещей, которые нашел на форумах, таких как добавление @типов/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 не поддерживает атрибуты, поскольку у него нет свойства «реквизит». ts(2607) «Обрезка» не может использоваться в качестве компонента JSX. Его экземпляр типа «Обрезка» не является допустимым элементом JSX. В типе «Обрезка» отсутствуют следующие свойства типа «Класс элементов»: контекст, setState, forceUpdate, реквизиты, ссылки(2786) (псевдоним) класс обрезки импорт обрезки

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

 

Возможно, некрасиво, но работает