Angeben komplexer PropTypes für Kinder

Question

Ich schreibe eine kleine Toolbar Komponente in React. Hier ist, wie es verwendet werden soll:

<Toolbar> 
    <ToolbarButtonSearch /> 
    <ToolbarButtonFold /> 
</Toolbar> 

oder

<Toolbar> 
    <ToolbarButtonSearch /> 
</Toolbar> 

oder

<Toolbar> 
    <ToolbarButtonFold /> 
</Toolbar> 

Ich mag würde der Lage sein, zu spezifizieren, dass die einzigen Kinder Toolbar sind eine der ToolbarButtonSearch akzeptiert, einer von ToolbarButtonFold, oder einer von jedem.

Hier ist, was ich habe jetzt (ohne Importe):

export default class Toolbar extends React.Component { 

    static get propTypes() { 
     const acceptedChildren = 
      React.PropTypes.oneOfType([ 
       React.PropTypes.instanceOf(ToolbarButtonFold), 
       React.PropTypes.instanceOf(ToolbarButtonSearch) 
      ]); 

     return { 
      children: React.PropTypes.oneOfType([ 
       React.PropTypes.arrayOf(acceptedChildren), 
       acceptedChildren 
      ]).isRequired 
     }; 
    } 

    render() { 
     return (
      <div className="toolbar"> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

Hier ist, wie ich es bin mit:

<Toolbar> 
    <ToolbarButtonFold /> 
</Toolbar> 

Diese in der folgenden Fehler führt:

Warning: Failed prop type: Invalid prop 'children' supplied to 'Toolbar'.

Ich bin mir nicht sicher, was ich falsch mache. Jede Einsicht wäre sehr hilfreich. Vielen Dank!

Answer 1

Haben Sie versucht zu tun:

customProp: function (props, propName, componentName) { 
    props.children.forEach(child => { 
     if (!child instanceof ToolbarButtonSearch && !child instanceof ToolbarButtonFold) { 
      return new Error(
       'Invalid children supplied to' + 
       ' `' + componentName + '`. Validation failed.' 
      ) 
     } 
    }) 
} 

Answer 2

Anstelle des Führens Komponenten (da sie in Toolbar importiert werden müssen, sowieso), könnten Sie einfach Requisiten passieren definieren, wenn die spezifische Komponente angezeigt werden soll.

const Toolbar = ({showButtonSearch = false, showButtonFold = false, buttonSearchProps = {}, buttonFoldProps = {}}) => { 

    return (

    <div className='Toolbar'> 

     {showButtonSearch ? <ButtonSearch {...buttonSearchProps} /> : null} 

     {showButtonFold ? <ButtonFold {...buttonFoldProps} /> : null} 

    </div> 

) 

} 

Diese Methode würden Sie Requisiten auch erlauben, für die Kinder, wie alle weiteren Funktionen, die Sie, bevor Sie die Kinder Anzeigen müssen auch passieren (wie die Kinder eine bestimmte Art und Weise der Bestellung).