2016-03-29 3 views
8

Я хочу, чтобы заставить пользователя пройти es6 Map object к React компонента с использованием PropTypes, как это, например:Право Реагировать компонентов PropTypes для ES6 (Слабое) Карты, наборы

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

Но похоже, есть ничего подобного в React. (The official documentation).

ответ

3

Это не удобно, но можно написать собственный PropType.

от React источника (который он, к сожалению, не разоблачить в данный момент):

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

, который можно использовать как так:

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

Попробуйте использовать функцию пользовательского свойства валидатор (от 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!'); 
    } 
} 

Так что может выглядеть примерно так:

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... 
    }, 
}; 
+0

А как указать массив из них, например, или PropTypes.Shape с этим proptype внутри? –

+0

Храните эту функцию как переменную (например, 'MyPropTypes.mapRequired') и просто используйте' MyPropTypes.mapRequired', где бы вы ни использовали другой тип prop, например 'PropType.string'. – Brandon

Смежные вопросы