Cette fois, je vais vous apporter les accessoires de React.js. Quelles sont les précautions lors de l'utilisation des accessoires de React.js. Ce qui suit est un cas pratique, jetons un coup d'oeil.
<Son userid={123}/>
<p>接收到的父页面的属性 -- userid: {this.props.userid} username:{this.props.username}</p>
// 给属性设置类型BodyIndex.propTypes = { // isRequired 必须的参数 userid: React.PropTypes.number.isRequired, username: React.PropTypes.string }// 设置默认值BodyIndex.defaultProps = { username: '哈哈'}
MyComponent.propTypes = { // You can declare that a prop is a specific JS primitive. 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.' ); } }) };
En développant l'opérateur
{...this.props}, toutes les propriétés transmises par le composant parent sont transmis à son propre composant enfant (composant petit-fils) id={1234} est Les propriétés transmises par le composant Fils lui-même au composant petit-fils
<GrandSon {...this.props} id={1234}/>
<p>{this.props.userid} {this.props.username} {this.props.id}</p>
<input ref='submitButton' type="button" value='提交' onClick={() => this.changeUserInfo(99)}/>
this.refs.submitButton.style.color = 'red';
Paramètres de routage de Vue.js
Directive personnalisée de Vue.js
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!