javascript - 如何从另一个 React 组件复制 Flow 类型的属性？

Question

我正在创建一个组件来包装另一个名为 Button 的组件. Button在不导出 Button 类型的库中定义的属性。

要正确键入我的组件，最好复制 Button 的类型的属性，向该类型添加一些属性(使用 typeof 、 $Diff 或类似的)并将其用作我的组件类型 StyledButton .

类似于:

type AddedPropsT = {
  isStyled: boolean,
}

function StyledButton(props: $GenericParam(typeof Button) & AddedPropsType) {
  return (<Button ...props className={isStyled ? "StyleClass" : ""} />)
}

当然是输入 util $GenericParam在 Flow 中不存在。 Button 的类型是 React.ComponentType<Props> (问题是我如何从那里得到 Props 类型)并且在幕后它是纯函数无状态组件。

Answer 1

您可以使用 React.ElementConfig<typeof Component> 获取 Button Prop 类型的实用程序类型:

type AddedProps = {
  isStyled: boolean,
}

function StyledButton(props: React.ElementConfig<typeof Button> & AddedProps) {
  return (<Button {...props} className={props.isStyled ? "StyleClass" : ""} />)
}