reactjs - Hvordan man sender en funktion fra en forælderkomponent til en barnekomponent med tildelbar type

Jeg er ny til TypeScript, og jeg vil gerne videregive min funktion onDogSelected til børnekomponenten <Dogs />.

Da jeg forsøgte, fik jeg en fejlmeddelelse som denne:

Type '{ onDogSelected: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.Property 'onDogSelected' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

Jeg ved ikke, hvad dette betyder. Jeg prøvede at finde ud af det, men jeg har stadig ingen løsning.

const HomePage: React.FC = () => {
    const [dogSelected, setDogSelected] = useState("");
    const onDogSelected = (e: any) => {
        setDogSelected(e.target.value)
    }
    return (
        <ApolloProvider client={client2}>
          <Dogs onDogSelected={onDogSelected} />
          {dogSelected && <span>{dogSelected}</span>}
        </ApolloProvider>
    );
};

export default HomePage;

Svar #1

React.FC er forældet, du bør bruge React.FunctionComponent.

React.FunctionComponent er en generisk type. Du bør indsætte din komponents props i den, hvis du forventer flere.

Så Dogs-komponenten skal se sådan ud,

import { FunctionComponent } from "react";

const Dogs: FunctionComponent<DogsProps> = (props) => {
  ...
};

interface DogsProps {
  onDogSelected(e: any): void;
}

Du behøver ikke at oprette en grænseflade eller type, du kan bare videregive det som et argument

const Dogs: FunctionComponent<{ onDogSelected(e: any): void; }> = (props) => {

Relaterede artikler