验证PropTypes，并排数组和单个子项

Question

验证孩子

要验证道具children，我使用以下定义：

children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.element),
    PropTypes.element,
  ]),

哪种情况适用于大多数情况：

// PropTypes.arrayOf(PropTypes.element)
<Component>
 {[
  <Childcomponent />,
  <Childcomponent />,
 ]}
</Component>

// PropTypes.element
<Component>
  <Childcomponent />
</Component>

但似乎无法验证具有混合类型的结构：

<Component>
 {[
  <Childcomponent />,
  <Childcomponent />,
 ]}
 <Childcomponent />
</Component>

// Failed propType: Invalid prop `children` supplied to `Component`.

Answer 1

this.props.children可以是单个元素，也可以是元素数组。您可以像这样进行验证：

const elementOrArrayOfElementPropType = PropTypes.oneOfType([
  PropTypes.arrayOf(PropTypes.element),
  PropTypes.element,
]);

...

propTypes: {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(elementOrArrayOfElementPropType),
    elementOrArrayOfElementPropType,
  ]),
}

你基本上必须更深层次，因为你可以有一个组件数组，只是一个组件数组或只是一个组件。