Die richtige Reagieren Komponente PropTypes für es6 (Weak) Karten-Sets

Question

ich den Benutzer zwingen, will eine es6 Map object zu einer Reaktion Komponente passiert PropTypes verwenden, wie dies zum Beispiel:

static propTypes = { 
    elementsMap: React.PropTypes.map(React.PropTypes.string, editorPropTypes.element).isRequired, 
} 

Aber sieht aus wie es ist nichts dergleichen in React. (The official documentation).

Answer 1

Es ist nicht bequem, aber es ist möglich, einen eigenen PropType zu schreiben.

Von der Quelle der Reaktion (die es leider nicht an dieser Stelle aussetzt):

function createChainableTypeChecker(validate) { 
    function checkType(isRequired, props, propName, componentName, location, propFullName) { 
    componentName = componentName || ANONYMOUS; 
    propFullName = propFullName || propName; 
    if (props[propName] == null) { 
     var locationName = ReactPropTypeLocationNames[location]; 
     if (isRequired) { 
     return new Error('Required ' + locationName + ' `' + propFullName + '` was not specified in ' + ('`' + componentName + '`.')); 
     } 
     return null; 
    } else { 
     return validate(props, propName, componentName, location, propFullName); 
    } 
    } 

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

    return chainedCheckType; 
} 

, die Sie mögen so verwenden können:

const map = createChainableTypeChecker(function(props, propName, componentName, location, propFullName) { 
    if (...) { 
     return null; // pass the check 
    } 
    return new Error('Error message'); // fail the check 
}); 

Answer 2

Versuchen Sie eine benutzerdefinierte Eigenschaft Validator-Funktion (von der documentation):

// You can also specify a custom validator. It should return an Error 
// object if the validation fails. Don't `console.warn` or throw, as this 
// won't work inside `oneOfType`. 
customProp: function(props, propName, componentName) { 
    if (!/matchme/.test(props[propName])) { 
    return new Error('Validation failed!'); 
    } 
} 

das könnte so etwas wie folgt aussehen:

static propTypes = { 
    elementMap: (props, propName) => { 
     const m = props[propName]; 
     if (!m) { return new Error(`Required property ${propName} not supplied`); } 
     if (!(m instanceof Map)) { return new Error("must be a Map"); } 
     // check contents of map if you want... 
    }, 
}; 

Answer 3

elementsMap: p.instanceOf(Map).isRequired