TypeScript 和 React：在 props 中传递组件并从函数中返回它

Posted 2023-03-13

【中文标题】TypeScript 和 React：在 props 中传递组件并从函数中返回它

【英文标题】：TypeScript and React: Pass component in props and return it from a function

【发布时间】：2019-04-16 18:56:25

【问题描述】：

我正在使用 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】：

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

应该是这样的：

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

renderForm 必须返回一个 ReactNode，所以我不能将 ReactNode 更改为 ComponentType（后者将解决 JSX 错误）。

component prop 和 renderForm 返回类型未连接。前者是组件，后者是元素。

【讨论】：

嗨，estus，谢谢你再次帮助我?我在你回答后对帖子进行了编辑，我只是​​想知道你的回答是不是这个意思？