React props.children 的流类型(联合元素 |数组)

Question

我有一个容器组件，它是带有子属性的 props 类型：

type Props = {
children: Array<React.Element<any>> | React.Element<any>,
settings: string | Object
};

容器可以只包含一个或多个 React.Element，并取决于它应该选择正确的操作。

在渲染函数中，我有类似的东西：

const children = this.props.children;
if ( _.isArray(children) ) {
return _.map(children, (child, key) => checkListComponent(child, key));
}
else if ( _.isObject(children) ) {
return checkListComponent(children);
}

主要功能是：

const checkListComponent = (child: React.Element<any>, key) => {
return child.props.list
? React.cloneElement(child, key ? { options, key } : { options })
: child;
};

毕竟，如果

return checkListComponent(children);

流：数组类型。此类型与预期的参数类型React$Element不兼容。

它似乎忽略了儿童道具的可能类型的非数组。我在 Github 上发现了关于联合数组和对象类型的问题，但什么都没有。

这种情况有什么解决办法吗？

上级：

我在props.settings上遇到的相同问题，它可以是从服务器获取设置对象的 API url 或直接设置对象。当我调用 axios.get(settings( 时(显然在props.settings现在是字符串之前检查(Flow 忽略可能的字符串类型并抱怨给出的对象而不是字符串。但是在下一行中，当我检查对象类型的设置并设置容器状态时

this.setState({ settings: this.props.settings });

它抱怨给出的字符串而不是对象。

这怎么可能，我能用它做什么？我可以但不想为设置 API 和对象使用两个不同的道具。对于道具儿童部分来说，这绝对是不可能的。

Answer 1

Flow 无法知道返回true_.isArray意味着children是一个数组，这同样适用于_.isObject。您的代码应按

const children = this.props.children;
if (Array.isArray(children) ) {
return children.map((child, key) => checkListComponent(child, key));
} else {
return checkListComponent(children);
}

因为Array.isArray是标准的，Flow 可以知道在else块中children必须是联合中的非数组类型。