TypeScript и React: передать компонент в реквизит и вернуть его из функции - PullRequest
Новая
       55

TypeScript и React: передать компонент в реквизит и вернуть его из функции

0 голосов
/ 14 ноября 2018

Я пишу компонент Form с React и TypeScript.Я использую Formik для логики формы.Я хочу передать компоненту <Form /> определенную форму в качестве реквизита и отобразить его.Вот что я попробовал: 

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;

Проблема в том, что строка, в которой я возвращаю <FormComponent />, выдает ошибку: 

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

renderForm должен вернуть ReactNode,поэтому я не могу изменить ReactNode на ComponentType (последний разрешит ошибку JSX).

Как это сделать в TypeScript?

Редактировать Итак, я получил это, сделав это (спасибо 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;

1 Ответ

0 голосов
/ 14 ноября 2018

ReactNode имеет тип React element , в то время как component prop, как ожидается, будет React component .

Вероятно, оно должно быть: 

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

renderForm должен возвращать ReactNode, поэтому я не могу изменить ReactNode на ComponentType (последний разрешит ошибку JSX).

component prop и renderForm тип возврата не связаны.Первый является компонентом, а второй - элементом.

...