React 组件中的流式系统答案

【问题标题】：Flow type system in React componentsReact 组件中的流式系统
【发布时间】：2019-04-07 00:16:26
【问题描述】：

我开始在我的 React 应用程序中使用 Flow，但我对类型系统有疑问。

我有一个像这样的无状态组件

export type LinkProps = {
 to: string,
 icon: React$Element<any>,
 style: Object
}

const Link = ({
  to,
  icon,
  style
}: LinkProps) => (
   <sample>

   </sample>
)

还有一个组件覆盖了一些道具

const NavLink = (props: LinkProps) => <Link icon={<Icon />} {...props} />

所以，如果我直接使用 Link 组件，我有 Flow 类型系统，但 NavLink 组件不是这样。

为什么我可以在不考虑类型系统的情况下使用 NavLink 组件？

【问题讨论】：

你是说你可以将任何你想传递的东西传递给NavLink，而 Flow 没有接收到它？
是的，这就是重点。如果我在同一个文件中使用 NavLink 我声明它类型系统工作，但如果我在侧边栏组件中使用 NavLink 则不是。

标签： javascript reactjs typescript types flowtype

【解决方案1】：

听起来您可能需要在使用NavLink 组件的文件顶部添加// @flow

【讨论】：