大写无状态组件时，Flow + React中断

Question

什么有效

我正在尝试编写无状态组件。以下代码可以正常工作，流程说明没问题：

import React, { type Node } from 'react';

function renderCond({children}: {children: Array<[boolean, ?Node]>}): ?Node {
  for (const [bool, Component: ?Node] of children) {
    if (bool) {
      return Component;
    }
  }
  return null;
}

<renderCond>
  {[
    [false, <h1>{'Comp 1'}</h1>],
    [true, <h1>{'Comp 2'}</h1>],
    [true, <h1>{'Comp 3'}</h1>],
  ]}
</renderCond>

没有什么

但是，如果我搜索“ renderCond”并将其替换为“ RenderCond”，则流量会爆炸。为什么？

3: function RenderCond({children}: {children: Array<[boolean, ?Node]>}): ?Node {
                                                                         ^
all branches are incompatible: Either null or undefined [1] is incompatible with null [2]. Or property `@@iterator` is missing in null or undefined [1] but exists in `$Iterable` [3].

References:
3: function RenderCond({children}: {children: Array<[boolean, ?Node]>}): ?Node {
                                                                         ^ [1]
[LIB] ..//static/v0.93.0/flowlib/react.js:14:   | null
                                                  ^ [2]
[LIB] ..//static/v0.93.0/flowlib/react.js:20:   | Iterable<?React$Node>;
                                                  ^ [3]

如果我return Component || null并且不使用可选的返回类型，则可以使用，但是我仍然不明白为什么我必须这样做。如果传入了可选类型，而我又将其返回，那么为什么流程会抱怨所有分支都不兼容？

即使我在return Component || null上没有更改返回类型，流仍然会出错。

当我使用flow --show-all-branches在本地运行时，

flow列出了更多分支。为什么未定义的不在列表中？

TryFlow链接

• renderCond ok
• RenderCond broken

Answer 1

当null组件编写为JSX样式时，流系统以不同的方式推断RenderCond。

null推断为可迭代的React$Node，不应将其提示为可选的返回类型。

RenderCond({children}: {children: Array<[boolean, ?Node]>}): Node {}

Answer 2

功能组件必须返回React$Node的子类型，该子类型不包含void。