Validate PropTypes, mit Array und einzelne Kinder nebeneinander

Question

Validate Kinder

Um die Stütze children ich die folgende Definition verwenden zu validieren:

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

die für die meisten Situationen gilt:

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

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

Es scheint jedoch unmöglich, eine Struktur mit gemischten Typen zu validieren:

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

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

Answer 1

this.props.children kann entweder ein einzelnes Element oder ein Array von Elementen sein. Sie können tun, um Ihre Validierung wie folgt aus: musste

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

... 

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

Sie im Grunde eine Ebene tiefer gehen, wie Sie ein Array von Arrays von Komponenten haben kann, nur eine Reihe von Komponenten oder nur eine Komponente.