Website-Suche

reactjs - Typescript-Fehler: Typ '{ onClick:() => void; }' ist nicht zuweisbar zu Typ 'IntrinsicAttributes'

Ich bin neu in TypeScript und habe Schwierigkeiten zu verstehen, warum mein Code nicht funktioniert.

Ich versuche, eine Karussell-Bildergalerie mit React und TypeScript zu erstellen, und ich habe Probleme, wenn ich versuche, "onClick" auf den linken und rechten Pfeilen zur Navigation zu verwenden.

Ich erhalte die folgenden Fehler:

Der Typ '{ onClick:() => void; }' ist nicht dem Typ 'IntrinsicAttributes' zuweisbar. Die Eigenschaft 'onClick' existiert nicht im Typ 'IntrinsicAttributes'.

Hier ist mein Code:

const Carousel = ({ slides }) => {
   
    return (
        <section className="slider">

            <ArrowRight onClick = {nextSlide} /> //The error is here!
            <ArrowLeft onClick = { () => prevSlide() } /> //and here!

            {slides.map((slide, index) => {
                return (
                    <div className="img-slide">
                        <img src={slide.image} />
                        <div className="rolo-slide">
                            {/* <img src={slide.image} onClick={slides.setCurrent(index)} /> */}
                        </div>
                    </div>
                )
            })}
        </section>
    )
}
export default Carousel

Hier ist, was ArrowLeft und Right sind, sie sind nur ein span, ich habe die Pfeile mit CSS erstellt.

function ArrowLeft() {
    return (
        <span className="arrow left"></span>
    )
}

Antwort #1

Dein ArrowLeft akzeptiert überhaupt keine Props, daher lässt TypeScript dich keine onClick-Prop zuweisen, die es nicht akzeptiert.

Aktualisiere ArrowLeft, sodass es einen onClick-Handler akzeptiert. Bei funktionalen Komponenten verwende ich normalerweise Funktionsausdrücke statt Deklarationen:

const ArrowLeft: React.FC<{onClick?: React.MouseEventHandler<HTMLElement>}> = ({onClick}) => {
    return (
        <span className="arrow left" onClick={onClick}></span>
    );
};

Einige Notizen dazu:

  • React.FC ist ein Alias für React.FunctionComponent. Es sagt TypeScript, dass ArrowLeft eine Funktionskomponente ist.
  • React.FC hat einen optionalen Typ-Parameter, um den Typ der Props anzugeben, den die funktionale Komponente erwartet (sie werden mit den üblichen Props kombiniert). Das <> nach React.FC liefert ein Typ-Argument, das das Props-Objekt beschreibt, das diese funktionale Komponente akzeptiert.
  • `onClick?:` sagt, dass die `onClick`-Eigenschaft optional ist.
  • React.MouseEventHandler<HTMLElement> sagt, dass der Typ der Prop (falls angegeben) ein Mausereignishandler für ein HTML-Element ist.
  • Beachten Sie, wie ich den onClick-Handler an das span weitergeleitet habe, damit er aufgerufen wird, wenn auf das span geklickt wird.

Ich habe eine Pfeilfunktion verwendet, weil sie (ein wenig) leichter als traditionelle Funktionen ist, aber du kannst eine traditionelle Funktion verwenden, wenn du möchtest:

const ArrowLeft: React.FC<{onClick?: React.MouseEventHandler<HTMLElement>}> = function({onClick}) {
    return (
        <span className="arrow left" onClick={onClick}></span>
    );
};

Übrigens: Mach dir keine Sorgen, alle diese Typen auswendig zu lernen. Du wirst natürlich React.FC kennen wollen (oder React.Component für class-Komponenten), aber zum Beispiel für das oben gezeigte onClick musst du es nicht magisch wissen. In jeder anständigen IDE könntest du damit beginnen, dass es nicht vorhanden ist, und folgendes tun:

// To start with
const ArrowLeft: React.FC = () => {
    return (
        <span className="arrow left" onClick={}></span>
    );
};

...dann bewegen Sie die Maus über den Teil onClick im span. Meine IDE (VS Code) sagt mir, dass der Typ von onClick React.MouseEventHandler<HTMLSpanElement> | undefined ist:

Den | undefined-Teil habe ich in den Props behandelt, indem ich ? verwendet habe, um ihn optional zu machen, und ich habe HTMLSpanElement nur zu dem allgemeineren HTMLElement geändert, weil es keinen Grund gab, dass der Code, der ArrowLeft verwendet, wissen müsste, dass es speziell ein span ist, im Gegensatz zu einem div oder i oder was auch immer.

Verwandte Artikel