TypeScript 和 React：在 props 中传递组件并从函数中传递 return

Question

我正在用 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;

问题是我 return <FormComponent /> 所在的行抛出错误：

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

renderForm 必须 return 一个 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;

Answer 1

ReactNode 是 React element 类型，而 component prop 应该是 React component.

可能应该是：

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

renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).

component 属性和 renderForm return 类型没有连接。前者是组件，后者是元素。

TypeScript 和 React：在 props 中传递组件并从函数中传递 return

TypeScript and React: Pass component in props and return it from a function

reactjs

typescript

typescript-typings

react-props

typescript-types