Extract/read React propTypes

Question

Voglio testare visivamente i componenti React. L'utente può modificare i puntelli del componente usando un modulo. Vorrei poter (ad esempio) eseguire il rendering di <select> in base a React.PropTypes.oneOf(['green', 'blue', 'yellow']).

Quando ho letto MyComponent.propTypes restituisce una funzione definita da React. C'è un modo per estrarre/leggere i tipi di puntelli?

Answer 1

Non è possibile leggere direttamente dal propTypes dal momento che, come lei ha detto, essi sono definiti come funzioni.

È possibile invece definire i propri propType in un formato intermedio, dal quale si genera lo statico propTypes.

var myPropTypes = { 
    color: { 
    type: 'oneOf', 
    value: ['green', 'blue', 'yellow'], 
    }, 
}; 

function processPropTypes(propTypes) { 
    var output = {}; 
    for (var key in propTypes) { 
    if (propTypes.hasOwnProperty(key)) { 
     // Note that this does not support nested propTypes validation 
     // (arrayOf, objectOf, oneOfType and shape) 
     // You'd have to create special cases for those 
     output[key] = React.PropTypes[propTypes[key].type](propTypes[key].value); 
    } 
    } 
    return output; 
} 

var MyComponent = React.createClass({ 
    propTypes: processPropTypes(myPropTypes), 

    static: { 
    myPropTypes: myPropTypes, 
    }, 
}); 

si potrebbe poi accedere al formato propTypes personalizzati tramite MyComponent.myPropTypes o element.type.myPropTypes.

Ecco un aiuto per rendere questo processo un po 'più semplice.

function applyPropTypes(myPropTypes, Component) { 
    Component.propTypes = processPropTypes(myPropTypes); 
    Component.myPropTypes = propTypes; 
} 

applyPropTypes(myPropTypes, MyComponent); 

Answer 2

Forse aggiungendo un esempio di codice di ciò che si sta tentando di fare come non capisco, ma perché si accede a propTypes? PropTypes non contiene valori ma piuttosto aspettative su cosa dovrebbero essere i tuoi tipi di valore per i diversi oggetti di scena passati nel componente.

Se si dispone di un modulo che consente di modificare i puntelli presumo che si sta passando nel puntello nel componente che renderà il componente selezionato. È possibile accedere a questi oggetti di scena attraverso l'oggetto oggetti.

Se si sta tentando di convalidare le propTypes che può avere la forma di diversi tipi di seguito può essere utilizzato:

optionalUnion: React.PropTypes.oneOfType([ 
    React.PropTypes.string, 
    React.PropTypes.number, 
    React.PropTypes.instanceOf(Message) 
]) 

Answer 3

In realtà, è possibile: controllare axe-prop-types