reactjs - React TypeScript Videregivelse af en funktion til en børnekomponent

Jeg prøver at sende en funktion til en børnekomponent, men jeg får en række TypeScript-fejl...

parent.tsx

import React from 'react';
import {Child} from './child';

const Parent: React.FC = () => {
    function fire() {
        console.log('fire')
    }

    return (
        <Child fire={fire}/>
//         ^___ error here!
    )
}

Fejlen på fire er Type '{ fire:() => void; }' kan ikke tildeles typen 'IntrinsicAttributes & { children?: ReactNode; }'. Ejendommen 'fire' findes ikke på typen 'IntrinsicAttributes & { children?: ReactNode; }'.ts(2322)

child.tsx

import React from 'react';
const Child: React.FC = (props: any) => {
    return (
        <p onClick={props.fire}>Click Me</p>
    )
}
export {Child};

Svar #1

Du tilføjer din type på det forkerte sted. Hvis du holder musen over React.FC, vil du se, at den accepterer et argument, og at standardværdien er {}, hvilket betyder ingen props, der ikke er tilgængelige som standard (som props.children). Tilføj det argument.

At tildele typen i argumentet som (props: any) giver ikke den typeinformation. Du kan udelade det, når du definerer det argument i React.FC

import React from 'react';
interface ChildProps {
   fire: () => void
}
const Child: React.FC<ChildProps> = (props) => {
    return (
        <p onClick={props.fire}>Click Me</p>
    )
}
export {Child};

Relaterede artikler