Javascript 主题为HOC的样式化组件不适用于React.FC类型

我正在使用React.FC typescript构建一些组件，今天我在尝试从样式化组件中使用

withTheme

HOC注入样式化组件道具时发现了这个typescript错误：

似乎

withTheme

HOC只接受

React.ComponentType

作为参数，但组件是使用

React.FC

（功能组件）构建的

是否有方法将

React.FC

转换为

React.ComponentType

更新

完整组件实现：

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Reset, LoadingBarStyled, SpinnerContainer } from './Style'
import { withTheme } from 'styled-components'
import ScaleLoader from 'react-spinners/ScaleLoader'

export interface ILoadingBarComponent {
    progress: number
    appearance?: string
    onFinish(finished: Promise<string>): void
}

const LoadingBarComponent: React.FC<ILoadingBarComponent> = ({
    progress = 0,
    appearance = 'default',
    onFinish
}) => {
    useEffect(() => {
        if (progress >= 100 && onFinish) {
            onFinish(
                new Promise((resolve, reject) => {
                    setTimeout(() => {
                        resolve('finished')
                    }, 800)
                })
            )
        }
    }, [progress, onFinish])
    return (
        <div className="loading-bar-component-module">
            <Reset />
            {progress > -1 && progress < 101 && (
                <>
                    <LoadingBarStyled progress={progress} appearance={appearance} />
                    <SpinnerContainer progress={progress}>
                        <ScaleLoader height={10} />
                    </SpinnerContainer>
                </>
            )}
        </div>
    )
}

LoadingBarComponent.propTypes = {
    progress: PropTypes.number.isRequired,
    appearance: PropTypes.string,
    onFinish: PropTypes.func.isRequired
}
export default withTheme(LoadingBarComponent)

import React，{useffect}来自“React”
从“道具类型”导入道具类型
从“./Style”导入{Reset，LoadingBarStyled，SpinnerContainer}
从“样式化组件”导入{withTheme}
从“反应微调器/ScaleLoader”导入ScaleLoader
导出接口ILoadingBarComponent{
进展：数目
外观？：字符串
完成（完成：承诺）：无效
}
const LoadingBarComponent:React.FC=({
进度=0，
外观='默认'，
完成
}) => {
useffect（（）=>{
如果（进度>=100&&onFinish）{
完成(
新承诺（（解决、拒绝）=>{
设置超时（（）=>{
解析（'已完成'）
}, 800)
})
)
}
}，[progress，onFinish]）
返回(
{progress>-1&&progress<101&&(
)}
)
}
LoadingBarComponent.propTypes={
进度：需要PropTypes.number.isRequired，
外观：PropTypes.string，
onFinish:PropTypes.func.isRequired
}
使用主题导出默认值（加载BarComponent）

您需要向组件道具界面添加

主题

道具：

interface Theme {}

export interface ILoadingBarComponent {
  progress: number
  appearance?: string
  onFinish(finished: Promise<string>): void
  theme: Theme
}

接口主题{}
导出接口ILoadingBarComponent{
进展：数目
外观？：字符串
完成（完成：承诺）：无效
主题：主题
}

您可以共享组件的代码吗？