样式化组件道具的流类型不起作用答案

【问题标题】：Flow typing of styled component props doesn't work样式化组件道具的流类型不起作用
【发布时间】：2019-09-05 11:03:34
【问题描述】：

我有这个样式的组件：

type Props = {
  iconAlign: string,
};

const IconWrapper: ComponentType<Props> = styled.View`
  margin: 10px 10px 0px 10px;
  position: absolute;
  ${({ iconAlign }: Props) =>
    iconAlign === 'left' ? 'left: -35px;' : 'right: -35px;'}
`;

这样称呼它：

<IconWrapper iconAlign="left">

但是 Flow 给了我以下错误：

Cannot call styled.View because property iconAlign is missing in object type [1] in the first argument of array element.

"flow-bin": "0.96.0",
"styled-components": "^4.2.0",
libdef: styled-components_v4.x.x (satisfies styled-components@4.2.0)

【问题讨论】：

当你调用IconWrapper 时，你不应该传递prop iconAlign 并且它是强制性的？你可以写ComponentType<{ iconAlign?: string }>，所以prop iconAlign可以是未定义的，或者为iconAlign设置一个defaultProps。
@Deve 我将 iconAlign 传递给我的组件。

标签： reactjs types flowtype styled-components

【解决方案1】：

由于某些原因，目前似乎不支持内置组件上的自定义属性，但 Flow 仍在开发对标记模板文字的支持。 https://github.com/flow-typed/flow-typed/pull/2933 的讨论对于理解为什么您的示例目前无法运行以及为使其成为可能而采取的步骤非常有用。

【讨论】：