react proptypes props example reactjs

reactjs - props - react proptypes install



¿Cómo se validan los PropTypes de un objeto anidado en ReactJS? (3)

Estoy usando un objeto de datos como mi accesorio para un componente en ReactJS.

<Field data={data} />

Sé que es fácil validar el objeto PropTypes en sí mismo:

propTypes: { data: React.PropTypes.object }

¿Pero qué pasa si quiero validar los valores dentro? es decir. data.id, data.title?

props[propName]: React.PropTypes.number.required // etc...


Puede usar React.PropTypes.shape para validar propiedades:

propTypes: { data: React.PropTypes.shape({ id: React.PropTypes.number.isRequired, title: React.PropTypes.string }) }

Actualizar

Como @Chris señaló en los comentarios, a partir de la versión React 15.5.0 React.PropTypes ha movido a paquetes prop-types .

import PropTypes from ''prop-types''; propTypes: { data: PropTypes.shape({ id: PropTypes.number.isRequired, title: PropTypes.string }) }

Más información


Si React.PropTypes.shape no le da el nivel de verificación de tipo que desea, eche un vistazo a tcomb-react .

Proporciona una función toPropTypes() que le permite validar un esquema definido con la biblioteca tcomb haciendo uso del soporte de React para definir validadores de propTypes personalizados , ejecutando validaciones usando la validación tcomb-validation .

Ejemplo básico de sus documentos :

// define the component props var MyProps = struct({ foo: Num, bar: subtype(Str, function (s) { return s.length <= 3; }, ''Bar'') }); // a simple component var MyComponent = React.createClass({ propTypes: toPropTypes(MyProps), // <--- ! render: function () { return ( <div> <div>Foo is: {this.props.foo}</div> <div>Bar is: {this.props.bar}</div> </div> ); } });


user: React.PropTypes.shap({ age: (props, propName) => { if (!props[propName] > 0 && props[propName] > 100) { return new Error(`${propName} must be betwen 1 and 99`) } return null }, })