将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