该函数将返回哪种元素？

Question

我创建了以下功能：

const linkRenderer = (link: string) => 
    <a href={link} target={'_blank'} rel={'noopener'}/>;

我想将具有此签名的函数传递给

function renderComponent(
  PageComponent: React.ComponentType<{ page: Page, anchorRenderer(link: string): React.Component}>
) {

....

   const page = new Page();
   const linkRenderer = (link: string) => <a href={link} target={'_blank'} rel={'noopener'}/>;
   return <PageComponent page={page}  anchorRenderer={linkRenderer} />
}

Typescript拒绝React.Component的{​​{1}}类型。这是错误消息：

  

类型'Element'不能分配给类型'Component <{}，{}，any>'。       类型“元素”中缺少属性“ setState”。

所以我想切换

anchorRenderer

到

React.ComponentType<{ page: Page, anchorRenderer(link: string): React.Component}> 

但是，如您在上面的屏幕截图中所看到的，有许多React.ComponentType<{ page: Page, anchorRenderer(link: string): React.Element}> 类型。我应该选哪一个？

Answer 1

您正在寻找JSX.Element，它是任何JSX元素表达式的类型，例如<a href={link} target={'_blank'} rel={'noopener'}/>。

但是，对于返回JSX.Element的函数使用自定义函数类型有点不常规。让链接渲染器成为将链接作为道具的真正的无状态功能组件，将是更加传统的做法。也就是说，anchorRenderer的类型为React.ComponentType<{link: string}>，您可以设置：

const linkRenderer = (props: {link: string}) =>
    <a href={props.link} target={'_blank'} rel={'noopener'}/>;