Question

我有一个包装其他文件的组件（例如View / div）。现在，它接受一个孩子并且可以正常工作，但是我希望该组件接受一个孩子元素或它们的数组，但是由于错误

，它无法使用flowjs做到这一点

React.Element [1]与数组类型[2]不兼容。

这是现在的道具：

type Props = {
  children: React.Element<any>
}

...

render() {
  const { children } = this.props;

  return (
  <View> {children} </View>
  );
}

这就是我要存档的内容：

type Props = {
  children: React.Element<any> | Array<React.Element<any>>
}

...

render() {
  const { children } = this.props;

  const childList: Array<React.Element<any>> = children.constructor === Array ? children : [children];

  return (
    <View> {children.map(c=>c)} </View>
  );
}

是否可以无错误地存档此功能？

（需要Aleksey L.的）解决方案使用Array.isArray（），以便进行一些修改或简化：

  <View>
    {Array.isArray(children) && children.map(c => c)}
  </View>

或

  <View>
    {children}
  </View>

Answer 1

要优化children的类型，可以使用Array.isArray：

const childList = Array.isArray(children) ? children : [children];

现在，流程确信childList是Array并具有map方法。
Type Refinements docs

**如果您不更改子项，则可以按原样使用它们（不使用map，并且无需将单个子项转换为数组）：<View>{children}</View>。

flowjs反应孩子类型对象Array <对象>

1 个答案: