typechecking with proptypes
类型检查是为了确保传入组件的参数正确性。
通常在项目中可以使用flow或者typescript来实现。
react提供了proptypes来检查类型。
示例：
import proptypes from 'prop-types';class greeting extends react.component { render() { return ( <h1>hello, {this.props.name}</h1> ); }}greeting.proptypes = { name: proptypes.string};
proptypesimport proptypes from 'prop-types';mycomponent.proptypes = { // you can declare that a prop is a specific js type. by default, these // are all optional. optionalarray: proptypes.array, optionalbool: proptypes.bool, optionalfunc: proptypes.func, optionalnumber: proptypes.number, optionalobject: proptypes.object, optionalstring: proptypes.string, optionalsymbol: proptypes.symbol, // anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types. optionalnode: proptypes.node, // a react element. optionalelement: proptypes.element, // you can also declare that a prop is an instance of a class. this uses // js's instanceof operator. optionalmessage: proptypes.instanceof(message), // you can ensure that your prop is limited to specific values by treating // it as an enum. optionalenum: proptypes.oneof(['news', 'photos']), // an object that could be one of many types optionalunion: proptypes.oneoftype([ proptypes.string, proptypes.number, proptypes.instanceof(message) ]), // an array of a certain type optionalarrayof: proptypes.arrayof(proptypes.number), // an object with property values of a certain type optionalobjectof: proptypes.objectof(proptypes.number), // an object taking on a particular shape optionalobjectwithshape: proptypes.shape({ color: proptypes.string, fontsize: proptypes.number }), // you can chain any of the above with `isrequired` to make sure a warning // is shown if the prop isn't provided. requiredfunc: proptypes.func.isrequired, // a value of any data type requiredany: proptypes.any.isrequired, // 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( 'invalid prop `' + propname + '` supplied to' + ' `' + componentname + '`. validation failed.' ); } }, // you can also supply a custom validator to `arrayof` and `objectof`. // it should return an error object if the validation fails. the validator // will be called for each key in the array or object. the first two // arguments of the validator are the array or object itself, and the // current item's key. customarrayprop: proptypes.arrayof(function(propvalue, key, componentname, location, propfullname) { if (!/matchme/.test(propvalue[key])) { return new error( 'invalid prop `' + propfullname + '` supplied to' + ' `' + componentname + '`. validation failed.' ); } })};
requiring single childimport proptypes from 'prop-types';class mycomponent extends react.component { render() { // this must be exactly one element or it will warn. const children = this.props.children; return ( <p> {children} </p> ); }}mycomponent.proptypes = { children: proptypes.element.isrequired};
default prop valuesclass greeting extends react.component { render() { return ( <h1>hello, {this.props.name}</h1> ); }}// specifies the default values for props:greeting.defaultprops = { name: 'stranger'};// renders hello, stranger:reactdom.render( <greeting />, document.getelementbyid('example'));
以上内容在实现一个通用react组件时非常有用。类型检查和参数默认值一起使用，保证组件的正常运行。
以上就是react中类型检查的介绍的详细内容。