如何将另一个组件附加到 ComponentType？答案

【问题标题】：How to attach another component to a ComponentType?如何将另一个组件附加到 ComponentType？
【发布时间】：2018-05-27 15:27:05
【问题描述】：

有没有办法将另一个组件附加到一个已经被键入为 ComponentType 的组件？

例如：

type Props = {
  name: string,
}

const Header: ComponentType<Props> = ({ props }) => (<h1>{name}</h1>)
const SubHeader: ComponentType<Props> = ({ props }) => (<h2>{name}</h2>)

Header.SubHeader = SubHeader // this is causes a flow error due to ComponentType

这个例子有点做作，但在使用 HOC 或 styled-components 时，有时需要手动强制为 ComponentType。

【问题讨论】：

你能extend the type of Header using intersection types吗？
是的，交叉点就可以了：const Header: ComponentType<Props> & { SubHeader?: ComponentType<Props> }
嗯，我认为这通常会起作用，但使用 styled-components 会破坏它，因为他们对 styled() 的定义拒绝所有交集类型。我会问他们该怎么做，但这是回答:)。你们有谁想回答吗？

标签： reactjs flowtype

【解决方案1】：

十字路口可以完成这项工作：const Header: ComponentType<Props> & { SubHeader: ComponentType<Props> }。

注意SubHeader 不能是Maybe 或可选类型，因为如果您尝试将Maybe 或可选类型作为组件呈现，Flow 会报错。

【讨论】：