निकालें/पढ़ें प्रोप टाइप

Question

मैं दृढ़ता से प्रतिक्रिया घटकों का परीक्षण करना चाहता हूं। उपयोगकर्ता एक फॉर्म का उपयोग कर घटक के प्रोप को बदल सकता है। मैं React.PropTypes.oneOf(['green', 'blue', 'yellow']) पर आधारित <select> प्रस्तुत करने के लिए (उदाहरण के लिए) सक्षम होना चाहता हूं।

जब मैं MyComponent.propTypes पढ़ता हूं तो यह प्रतिक्रिया द्वारा परिभाषित एक फ़ंक्शन देता है। प्रोप प्रकार निकालने/पढ़ने का कोई तरीका है?

Answer 1

आप नहीं सीधे propTypes से के बाद से, जैसा कि आप ने कहा कि पढ़ सकते हैं, वे परिभाषित कर रहे हैं कार्यों के रूप में।

आप इसके बजाय अपने प्रोपटाइप को मध्यस्थ प्रारूप में परिभाषित कर सकते हैं, जिससे आप अपना 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, 
    }, 
}); 

फिर आप MyComponent.myPropTypes या element.type.myPropTypes के माध्यम से अपने कस्टम propTypes प्रारूप का उपयोग कर सकते हैं।

इस प्रक्रिया को थोड़ा आसान बनाने के लिए यहां एक सहायक है।

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

applyPropTypes(myPropTypes, MyComponent); 

Answer 2

शायद आप जो करने की कोशिश कर रहे हैं उसका एक कोड उदाहरण जोड़ना क्योंकि मुझे समझ में नहीं आता है लेकिन आप प्रोप टाइप्स क्यों एक्सेस कर रहे हैं? PropTypes में मूल्य नहीं होते हैं बल्कि घटक में पारित विभिन्न प्रोपों के लिए आपके मूल्य प्रकारों की अपेक्षाओं की अपेक्षाएं होती हैं।

यदि आपके पास कोई ऐसा फॉर्म है जो आपको प्रोप को बदलने देता है तो मुझे लगता है कि आप घटक में प्रोप में गुजर रहे हैं जो चयन घटक को प्रस्तुत करेगा। आप प्रोप ऑब्जेक्ट के माध्यम से इन प्रोपों तक पहुंच सकते हैं।

आप propTypes निम्नलिखित इस्तेमाल किया जा सकता विभिन्न प्रकार के रूप में हो सकता है कि मान्य करने के लिए कोशिश कर रहे हैं:

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

Answer 3

वास्तव में, यह संभव है: axe-prop-types