Maison > interface Web > js tutoriel > React.js avec les accessoires

React.js avec les accessoires

php中世界最好的语言
Libérer: 2018-03-13 14:51:27
original
1797 Les gens l'ont consulté

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.

Le composant parent transmet la valeur au composant enfant

<Son userid={123}/>
Copier après la connexion
Recevoir la valeur transmise par le composant parent dans le composant Fils

<p>接收到的父页面的属性 -- userid: {this.props.userid} username:{this.props.username}</p>
Copier après la connexion
De bien sûr, cela peut également être fait sur la page Son Définir le type et la valeur par défaut des paramètres passés


// 给属性设置类型BodyIndex.propTypes = {    // isRequired 必须的参数
    userid: React.PropTypes.number.isRequired,
    username: React.PropTypes.string
}// 设置默认值BodyIndex.defaultProps = {
    username: &#39;哈哈&#39;}
Copier après la connexion
Pour plus de détails sur la configuration du type, veuillez vous référer à la documentation officielle

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&#39;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([&#39;News&#39;, &#39;Photos&#39;]),  // 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&#39;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&#39;t `console.warn` or throw, as this
  // won&#39;t work inside `oneOfType`.
  customProp: function(props, propName, componentName) {    if (!/matchme/.test(props[propName])) {      return new Error(        &#39;Invalid prop `&#39; + propName + &#39;` supplied to&#39; +        &#39; `&#39; + componentName + &#39;`. Validation failed.&#39;
      );
    }
  },  // 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&#39;s key.
  customArrayProp: PropTypes.arrayOf(function(propValue, key,       componentName, location, propFullName) {    if (!/matchme/.test(propValue[key])) {      return new Error(        &#39;Invalid prop `&#39; + propFullName + &#39;` supplied to&#39; +        &#39; `&#39; + componentName + &#39;`. Validation failed.&#39;
      );
    }
  })
 };
Copier après la connexion
Le composant Son transmet les propriétés transmises du composant parent au composant petit-fils

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}/>
Copier après la connexion
sont appelées par le composant petit-fils et les propriétés transmises à partir du composant Son

<p>{this.props.userid} {this.props.username} {this.props.id}</p>
Copier après la connexion
refs : sont le seul moyen fiable d'accéder au nœud DOM à l'intérieur du composant. Méthode


Ajouter une référence à la balise

.
<input ref=&#39;submitButton&#39; type="button" value=&#39;提交&#39; onClick={() => this.changeUserInfo(99)}/>
Copier après la connexion
Lorsque vous souhaitez obtenir le dom, obtenez-le via this.refs.xxx

this.refs.submitButton.style.color = &#39;red&#39;;
Copier après la connexion
Remarque :

N'appelez pas Refs avant le rendu ou le rendu ;

N'abusez pas des Refs, si vous ne pouvez pas l'utiliser, ne l'utilisez pas !!!

Je crois que vous l'avez maîtrisé après avoir lu le cas dans cet article Pour des méthodes plus intéressantes, veuillez payer attention aux autres articles connexes sur le site php chinois !

Lecture recommandée :

Paramètres de routage de Vue.js

Directive personnalisée de Vue.js

Transition JS depuis 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal