reactjs - Använda React.ComponentProps i en generisk funktion

Tydligen är det korrekt sättet att använda React.ComponentProps för att hämta komponentens egenskapstyper, men jag kan inte få det att fungera i en generisk funktion:

Exempelkomponent:

interface OwnProps {
  value: string;
}

const TestComponent: SFC<OwnProps> = (props) => {
  const { } = props;
  return (
    <div />
  );
};

Generisk funktion:

function myFunction<T extends React.ComponentType<any>>
 (Component: React.ReactType, props: React.ComponentProps<T>) {
  // implementation
}

Funktionsanvändning:

myFunction(TestComponent, {
  value: 1  // not detecting invalid value
});

Som du kan se tilldelas value ett numeriskt värde men kompilatorn upptäcker inte felet.

ett sätt att göra detta är att använda funktionen som följer:

myFunction<typeof TestComponent>(TestComponent, {
  value: 1
});

det fungerar, men jag är nyfiken på hur det kan göras utan att använda typeof.

Svar #1

function myFunction<T extends React.ComponentType<any>>
 (Component: React.ReactType, props: React.ComponentProps<T>) {
  // implementation
}

I denna definition kan Component vara vilken React.ReactType som helst. Det nämns inget om T, så detta kommer inte att upprätthålla någon relation mellan komponenten och props.

Istället tror jag att du vill ha detta:

function myFunction<T extends React.ComponentType<any>>
  (Component: T, props: React.ComponentProps<T> {
  // implementation
}

Relaterade artiklar