Ekstre/oku React propTypes

Question

Görsel olarak bileşenleri reaktifi test etmek istiyorum. Kullanıcı, bileşenin formlarını bir form kullanarak değiştirebilir. 'u React.PropTypes.oneOf(['green', 'blue', 'yellow']) temel alınarak görüntüleyebilmek istiyorum.

MyComponent.propTypes'u okurken React tarafından tanımlanan bir işlevi döndürür. Pervane türleri çıkarmak/okumak için bir yolu var mı?

Answer 1

Sen propTypes doğrudan okuyamaz, tanımlandıkları işlevler olarak.

Bunun yerine propTyp'lerinizi propTypes statik ürününüzün üretildiği bir ara biçimde tanımlayabilirsiniz.

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, 
    }, 
}); 

Ardından MyComponent.myPropTypes veya element.type.myPropTypes aracılığıyla özel propTypes biçimi erişebilir.

Bu işlemi biraz daha kolay hale getirmek için yardımcıdır.

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

applyPropTypes(myPropTypes, MyComponent); 

Answer 2

Belki de tam olarak anlamadığımdan yapmaya çalıştığınız şeyin bir kod örneği ekleyerek propTypes'a neden erişiyorsunuz? PropTypes değerleri içermez, bunun yerine bileşeninize iletilen farklı sahne için değer türlerinizin ne olması gerektiğine dair beklentiler içermez.

Sahne düzenini değiştirmenize izin veren bir formunuz varsa, seçtiğim bileşenin oluşturulacağı bileşene pervaneyi aktardığınızı varsayardım. Bu sahne öğelerine sahne nesnesi aracılığıyla erişebilirsiniz.

sen şu kullanılabilecek farklı türde şekliniz olabilir propTypes doğrulamak çalışıyorsanız: beri dediğin gibi

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

Answer 3

Aslında mümkündür: axe-prop-types