Vyhledávání na webu

reactjs - Jak předat funkci z rodičovské komponenty do dětské komponenty s přiřaditelným typem

Jsem nový v TypeScriptu a chci předat svou funkci onDogSelected dětské komponentě <Dogs />.

Když jsem to zkoušel, objevila se mi nějaká chybová zpráva jako tato:

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

Nevím, co to znamená. Snažil jsem se na to přijít, ale stále nemám žádné řešení.

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;

Odpověď č. 1

React.FC je zastaralé, měli byste používat React.FunctionComponent.

React.FunctionComponent je generický typ. Měli byste do něj předat propsy vašeho komponentu, pokud očekáváte více.

Tak by měla komponenta Dogs vypadat,

import { FunctionComponent } from "react";

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

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

Nemusíte vytvářet žádné rozhraní ani typ, můžete jej jednoduše předat jako argument

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

Související články