reactjs - TypeScript og React: Send komponent i props og returner den fra en funksjon

Jeg skriver en skjema-komponent med React og TypeScript. Jeg bruker Formik for skjema-logikken. Jeg vil sende <Form />-komponenten et spesifikt skjema som en prop og rendere det. Her er hva jeg prøvde:

import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactNode } from "react";

export interface Props {
  component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
  handleSubmit(): void;
}

export class Form extends PureComponent<Props> {
  renderForm = (formikProps: FormikProps<any>): ReactNode => {
    const { component: FormComponent } = this.props;
    return <FormComponent {...formikProps} />;
  };

  render() {
    const { handleSubmit } = this.props;
    return <Formik render={this.renderForm} />;
  }
}

export default Form;

Problemet er at linjen der jeg returnerer <FormComponent /> gir feilen:

[ts] JSX element type 'FormComponent' does not have any construct or call signatures.

renderForm må returnere en ReactNode, så jeg kan ikke endre ReactNode til ComponentType (det sistnevnte ville løst JSX-feilen).

Hvordan ville man gjort dette i TypeScript?

Rediger Så jeg fikk det til å fungere ved å gjøre dette (takk til estus):

import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactElement } from "react";

export interface Props {
  component: React.ComponentType<any>; // TODO: Change to one of LoginForm or RegisterForm.
  handleSubmit(): void;
}

export class Form extends PureComponent<Props> {
  renderForm = (formikProps: FormikProps<any>): ReactElement<any> => {
    const { component: FormComponent } = this.props;
    return <FormComponent {...formikProps} />;
  };

  render() {
    const { handleSubmit } = this.props;
    return <Formik render={this.renderForm} />;
  }
}

export default Form;

Svar #1

ReactNode er React element-type, mens component-prop forventes å være React komponent.

Det bør sannsynligvis være:

export interface Props {
  component: React.ComponentType;
  handleSubmit(): void;
}

renderForm må returnere en ReactNode, så jeg kan ikke endre ReactNode til ComponentType (det siste ville løst JSX-feilen).

component-prop og renderForm-returntype er ikke koblet sammen. Den førstnevnte er en komponent og den sistnevnte er et element.

Relaterte artikler