den Datentyp Reagieren Komponenten propTypes Definition

Question

den folgenden Code Angenommen:

TestComponent.propTypes = { 
    text: React.PropTypes.string, 
    myEnum: React.PropTypes.oneOf(['News', 'Photos']) 
}; 

Ich habe in einer anderen Datei die folgende (das wurde mit Testcomponent):

if (TestComponent.propTypes.text === React.PropTypes.string) {...} 

if (TestComponent.propTypes.myEnum === React.PropTypes.oneOf) {...} 

Nun, die zu meiner Zufriedenheit zuerst, wenn gearbeitet wurde. Aber das zweite, wenn es nie wieder wahr ist. Ich habe versucht, es in die Syntax unten zu ändern, aber es hat nicht geholfen.

Also, die Frage ist: Welchen Mechanismus gibt es, um den Typ einer Stütze zu entdecken? Ich weiß, dass React den Wert eines Props gegen den PropType testet, um es zu validieren. Ich brauche aber auch Zugriff auf den 'erwarteten Typ', um meine Sachen zu machen.

BTW, hier ist ein Auszug aus dem Code reagieren, die propTypes (abgekürzt aus Gründen der Kürze) bestätigt:

function createPrimitiveTypeChecker(expectedType) { 
    function validate(props, propName, componentName, location, propFullName){  
    var propValue = props[propName]; 
    var propType = getPropType(propValue); 
    if (propType !== expectedType) { 
     // return some Error 
    } 
    return null; 
    } 
    return createChainableTypeChecker(validate); 
} 

Wie Sie sehen können die Parameter der äußeren Funktion expectedType ist. Es wird in der inneren Validierungsfunktion verwendet (if (propType! == expectedType)). React speichert den expectedType jedoch nicht in einer Membervariablen, sodass auf ihn durch externen Code zugegriffen werden kann. Also, wie findet der äußere Code den Typ des propType?

Mein Punkt ist es nicht, einen bestimmten Wert für die Requisite zu 'validieren'. Das wird von React sehr gut erledigt. Mein Punkt ist, eine bestimmte Logik abhängig von der Requisite Art zu tun, die ich mit Arten wie anyOf, objectOf, Form, etc. nicht erreichen kann.

Irgendwelche Gedanken, Vorschläge ??

Answer 1

Kurze Antwort, Sie können diese nicht vergleichen, weil sie auf verschiedene Funktionen zeigen. Wenn Sie oneOf aufrufen, gibt es eine andere Funktion zurück.

Erklärung: Das Problem hier ist, dass React.PropTypes.oneOf die Funktion createEnumTypeChecker ist.

Während React.PropTypes.myEnum enthält den Rückgabewert der oneOf Funktion des Aufrufs - weil in der propTypes Definition Sie haben tatsächlich oneOf() nennen.

Das Ergebnis des Aufrufs oneOf() ist eine andere Funktion, die in createChainableTypeChecker() deklariert ist.

Leider funktioniert Ihr zweiter Versuch nicht, weil diese Funktionen unterschiedlich sind, sie werden jedes Mal erstellt, wenn Sie oneOf() anrufen. Siehe createChainableTypeChecker in ReactPropTypes.js

var chainedCheckType = checkType.bind(null, false); 
chainedCheckType.isRequired = checkType.bind(null, true); 

return chainedCheckType; 

Lösung: Ich schlage vor, Sie testen, die Namen der Funktionen. Dies wird beweisen, dass dies ein gültiger React Prop Typ ist.

// returns false 
React.PropTypes.oneOf(['myArr']) === React.PropTypes.oneOf(['myArr']) 

// returns true 
React.PropTypes.oneOf(['myArr']).name == React.PropTypes.oneOf(['myArr']).name 

// this should return true in your case: 
if (TestComponent.propTypes.myEnum.name === React.PropTypes.oneOf().name) 

Leider sind alle nicht-primitive Reaktion propTypes Verwendung createChainableTypeChecker, und dies gibt immer eine Funktion mit dem Namen checkType.Wenn dieser Name für jeden propType unterschiedlich wäre, könnten Sie überprüfen, welcher Typ verwendet wird. Wie es jetzt ist, können Sie nicht wissen, ob es oneOf, objectOf oder eine der anderen ist, einschließlich any.