Die JSX-Elementklasse unterstützt keine Attribute, da sie keine „props“-Eigenschaft hat.ts(2607)

Ich erhalte diese Fehlermeldung, wenn ich „Cropper“ aus der React-Easy-Crop-Bibliothek verwende. Ich habe ein paar Dinge ausprobiert, die ich in Foren gefunden habe, wie das Hinzufügen von @types/react und das Importieren von * als React aus „react“, aber es scheint nichts zu sein arbeiten.

Hier ist der Code, der mir Probleme bereitet:

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}
    />
   );
}

Die ganze Fehlermeldung lautet:

Die Blockquote-JSX-Elementklasse unterstützt keine Attribute, da sie keine „props“-Eigenschaft hat.ts(2607) „Cropper“ kann nicht als JSX-Komponente verwendet werden. Sein Instanztyp „Cropper“ ist kein gültiges JSX-Element. Dem Typ „Cropper“ fehlen die folgenden Eigenschaften vom Typ „ElementClass“: context, setState, forceUpdate, props, refsts(2786) (alias) class Cropper import Cropper

Ich hatte den gleichen Fehler mit <Text></Text> und das lag daran, dass ich die Komponente nicht importiert hatte.

Ich bin kürzlich tatsächlich darauf gestoßen und konnte, nachdem ich hier keine Antwort gefunden habe, Typoskripte verwenden traceResolution Zu entdeckende Funktion: Typoskript wurde aufgelöst import "react" Zu node_modules/react/index.js anstatt node_modules/@types/react/index.d.ts. Einige Änderungen an meiner tsconfig.json konnten dieses Problem beheben – das hatte ich node_modules/* in einem meiner paths Streichhölzer, und musste hinzufügen node_modules/@types/* um es auch zum Suchen zu bringen @types/ Pakete.

Daher würde ich empfehlen, „traceResolution“ (entweder als tsc-Flag oder als tsconfig.json-Feld) zu verwenden und zu prüfen, ob „react“ falsch aufgelöst wird. Wenn dies der Fall ist, konzentrieren Sie sich darauf, das Problem zu beheben. Es könnte das gleiche Problem sein, bei dem „node_modules/react“ anstelle von „node_modules/@types/react“ gefunden wird, obwohl die Ausgabe von „traceResolution“ ein klares letztes Wort dazu haben wird.

Ich hatte das gleiche Problem, bei dem dieser Fehler heute bei demselben Projekt auftrat, das neulich einwandfrei lief. Nach vielen Versuchen und Irrtümern habe ich schließlich meinen Ordner „node_modules“ gelöscht und ihn mit einem neu erstellt npm install. Dann hat es wieder funktioniert.

Heute ist bei der Verwendung von antd das gleiche Problem aufgetreten Option Komponente, mein Code sieht so aus:

const renderPhotoTypeImpl = () => {
    const photoList: JSX.Element[] = [];
    if (photoType && photoType.length > 0) {
    photoType.forEach(item => {
        photoList.push(
        <Option value={item} label={item}>
            <Space>
                <span role="img" aria-label="China">
                </span>
                Dog
            </Space>
        </Option>);
    });
    }
    return (<div></div>);
}

füge einfach das hinzu Option Wenn Sie Folgendes definieren, wird dieses Problem behoben:

const { Option } = Select;

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

Wahrscheinlich hässlich, aber funktioniert