Javascript 流-通过道具传递的渲染组件

我试图在按钮反应组件中使用流

// @flow

import * as React from 'react'

type Props = {
  color: string,
  block: boolean,
  component: React.Component<*> | string,
  className: string,
  domProps: Object
}

const Button = ({
  color,
  block,
  component,
  className,
  ...domProps
}: Props) => {
  const Component = component

  return (
    <Component
      {...domProps}
      className={`
        ${className}
        btn
        btn--${color}
        ${block ? 'btn--block' : ''}
      `}
    />
  )
}

Button.defaultProps = {
  component: 'button',
  block: false
}

export default Button

/@flow
从“React”导入*作为React
类型道具={
颜色：字符串，
块：布尔，
组件：React.component |字符串，
类名：string，
domProps:对象
}
常量按钮=({
颜色
块
组成部分，
类名，
…道具
}：道具）=>{
常量组件=组件
返回(
)
}
Button.defaultProps={
组件：'按钮'，
区块：假
}
导出默认按钮

但是，当我尝试渲染自定义组件流时，会显示以下错误：

[flow]无法创建

组件

元素，因为

反应。组件

[1] 不是反应组分。（参考文献：[1]）

---

如何执行此工作？

您不能在流中使用

React.Component

作为类型定义。React的流中有内置的类型定义。以下是您要查找的内容：

React.ComponentType

用法示例：

type Props = {
  color: string,
  block: boolean,
  component: React.ComponentType<*> | string,
  className: string,
  domProps: Object
}

类型道具={
颜色：字符串，
块：布尔，
组件：React.ComponentType |字符串，
类名：string，
domProps:对象
}

在此处阅读有关其他React类型定义的所有信息：