Question

我有一个容器组件，它是具有children属性的道具类型：

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

Container只能包含一个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;
    };

毕竟我在其他

中遇到了Flow错误

return checkListComponent(children);

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

似乎忽略了儿童道具的可能类型的非数组。我找到了关于union Array和Object类型的issue on Github，但没有任何内容。

那种情况有解决方案吗？

UPD：

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

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

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

怎么可能，我该怎么办？我可以但不想为设置API和对象设置两个不同的道具。对于 props.children 部分问题，这绝对不可能。

Answer 1

Flow无法知道_.isArray返回true表示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必须是你工会中的非数组类型。

React props.children的流类型（union Element | Array）

1 个答案: