如何正确填充ListItem.Chevron的Component属性值？

问题重现 #

尝试为ListItem.Chevron的Component属性赋值自定义图标组件时，出现TypeScript类型错误，代码示例如下：

<ListItem.Chevron Component={() => {
  return (
    <Iconfont
      name="ic_in_24"
      size={24}
      color="#48D597"
      onPress={() => navigation.navigate(item.route)}
    />
  );
}} />

错误提示：

TS2769: 没有与此调用匹配的重载。
重载1（共2个），'(props: ListItemChevronProps, context?: any): ReactElement<any, any> | null'，给出以下错误：
类型'() => JSX.Element'不能赋值给类型'typeof Component'。
类型'() => Element'与签名'new <P = {}, S = {}, SS = any>(props: P | Readonly<P>): Component<P, S, SS>'不匹配。
重载2（共2个），'(props: ListItemChevronProps): ReactElement<any, any> | null'，给出以下错误：
类型'() => JSX.Element'不能赋值给类型'typeof Component'。

错误原因 #

ListItem.Chevron的Component属性类型为typeof React.Component，要求传入React类组件的构造函数，但你传入的是一个返回JSX元素的函数（渲染函数），两者类型不匹配，导致TypeScript报错。

解决方案 #

需要将自定义图标逻辑封装为符合类型要求的组件，再传递给Component属性：

方案1：封装为类组件（推荐） #

将图标逻辑包装成React类组件，直接传入Component属性：

import React from 'react';

class CustomChevron extends React.Component {
  render() {
    return (
      <Iconfont
        name="ic_in_24"
        size={24}
        color="#48D597"
        onPress={() => navigation.navigate(item.route)}
      />
    );
  }
}

// 使用方式
<ListItem.Chevron Component={CustomChevron} />

方案2：类型断言（临时兼容） #

如果不想修改组件形式，可以通过类型断言强制跳过TypeScript检查（仅临时兼容场景，不推荐长期使用）：

<ListItem.Chevron 
  Component={() => {
    return (
      <Iconfont
        name="ic_in_24"
        size={24}
        color="#48D597"
        onPress={() => navigation.navigate(item.route)}
      />
    );
  } as typeof React.Component} 
/>

说明 #

方案1是符合TypeScript类型规范的正确做法，能保证代码的可维护性；方案2仅作为临时绕过检查的手段，长期维护建议优先使用方案1。

内容的提问来源于stack exchange，提问作者poplink