将 React 功能组件作为函数的参数传递时，我应该如何使用 TS 声明函数参数类型

Question

我对函数参数的类型声明有疑问。请看下面的代码，

const FunctionalComponent = ({propA,propB}: FunctionalComponentProps): JSX.Element => {
   return 
}

现在我想将 FunctionalComponent 作为参数传递给另一个函数。参数类型应该如何声明？

const Foo = (
   para1: string,
   TheFunctionalComponent: ??? // Tried React.FC<any>, it work, want to provide more strict such as React.FC<FunctionalComponentProps>, this way it does not work. Is the React.FC<any> the only way? 
)

Answer 1

考虑这个例子：

import React, { FC } from 'react'

export interface ChildComponentProps {
  name: string;
  id: string;
}

export const ChildComponent = ({ name, id }: ChildComponentProps): JSX.Element => (
  <div>
    Hi {name} my id is {id}
  </div>
);


const ParentComponent: FC<{ Comp: FC<ChildComponentProps> }> = ({ Comp }) =>
  <Comp name={"2"} id={"3"} />

const App = <ParentComponent Comp={ChildComponent} />

Playground

您还应该提供您的类型 ParentComponent

更新

import React, { FC } from 'react'

export interface ChildComponentProps {
  name: string;
  id: string;
}

export const ChildComponent = ({ name, id }: ChildComponentProps): JSX.Element => (
  <div>
    Hi {name} my id is {id}
  </div>
);


const ParentComponent = (Comp: FC<ChildComponentProps>) =>
  <Comp name={"2"} id={"3"} />

const App = ParentComponent(ChildComponent)

Playground

更通用的方法：

import React, { FC } from 'react'

export interface ChildComponentProps {
  name: string;
  id: string;
}

export const ChildComponent = ({ name, id }: ChildComponentProps): JSX.Element => (
  <div>
    Hi {name} my id is {id}
  </div>
);


const ParentComponent = <Props,>(Comp: FC<Props>) =>
  (props: Props) => <Comp {...props} />

const App = ParentComponent(ChildComponent)({ name: 'John', id: '#1' })

Playground

将 React 功能组件作为函数的参数传递时，我应该如何使用 TS 声明函数参数类型

When passing a React functional Component as a parameter of a function, how should I declare the function parameter type with TS

typescript

reactjs

react-functional-component