Quelles sont les propriétés de React ? Explication détaillée sur l'utilisation des attributs de réaction, des événements et du partage

Cet article parle principalement de l'utilisation des attributs dans react, ainsi que de l'utilisation des événements de réaction et du partage. Ensuite, lisons cet article

Le contenu principal de cet article explique le. utilisation des attributs dans React, l'acquisition de balises spécifiques à React et l'utilisation du partage React, etc. Les détails sont les suivants :

• Attribut State de React

• Attribut Props de React

• Liaison d'événement React et interaction bidirectionnelle des données

• Réutilisation et vérification des composants React

• Réfs des composants React

• Opérations partagées Mixins entre composants React indépendants

1. 🎜>

• La machine d'état de React est utilisée pour modifier les données de son propre module

• La portée d'état n'appartient qu'à la classe actuelle et ne polluera pas ; autres modules ;

• Initialisation : this.state = {username : « XXX »}

• Le paramètre d'état initialisé est placé dans le constructeur. ;

• Modifier l'état : this.setState({username: “AAA”});

• Résumé : l'état est le paramètre du module propres attributs.

2. Attributs des accessoires

• les attributs sont des attributs externes pour le module (transfert de données au niveau parent-enfant)

• La méthode de passage nécessite un paramétrage ;

• est utilisée dans le module de réception : this.props.xxx;

3 .Interaction bidirectionnelle entre la liaison d'événement et les données

3.1 Liaison d'événement

• La première façon : liez ceci dans le constructeur : this.focus = this.focus bind. (this);

• ou appelez la liaison : onClick={this.focus.bind(this,99)}

  
  

• (ceci dans la valeur de liaison est utilisé pour lier le modèle, 99 est utilisé pour le transfert de paramètres)

3.2 Liaison bidirectionnelle des données

• Le parent transmet à l'enfant (es5 suit)

• La page enfant transmet les paramètres à la page parent

  
  

• Dans la page enfant, transmettez les paramètres entre les groupes en appelant les accessoires d'événement transmis depuis la page parent

• Utilisez l'événement onChange pour une surveillance en temps réel

3.3 Méthode de demande de données

• Méthode AJAX traditionnelle

• promesse fournie par ES6

promise.then( null, function( reason ){
    /* rejection */} );// 等价于promise.catch( function( reason ){
    /* rejection */} );

• Promesse fournie par ES6 : utilisez Fetch pour implémenter les requêtes HTTP

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

4. >4.1 Vérification des accessoires

Méthode 1 : const types = {userid: React.PropTypes.number.isRequired} ; BodyIndex.propTypes = types;

• Méthode 2 : BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };

• Remarque : propTypes nécessite un environnement d'installation après la version v15.5 Pour utiliser :
npm install prop-types –save

• 
  

Introduction comme suit : importer des PropTypes à partir de 'prop-types' ;

• Utilisez BodyIndex.propTypes = { userid: PropTypes.number.isRequired };
4.2 Valeur des accessoires par défaut

Définition : const defaultNum = {username : "Default name"};

• Utilisation : BodyIndex.defaultProps = defaultNum (Si vous souhaitez en savoir plus, accédez au site Web PHP chinois
Manuel de référence React (Apprendre dans la colonne
• )
  4.3 Réutilisation des composants — utilisation des paramètres

5. Réf. des composants — obtenir des balises.

<BodyChild {...this.props} sex={"XXX}/>

Méthode 1 : Méthode originale d'obtention des balises : var myButton = document.getElementById("submitButton");

• Méthode 2 : définissez l'attribut ref sur l'étiquette :
;

• <input ref="submitButton" type="button" value="提交数据"/>

  Obtenez et définissez la méthode 2 : this.refs.submitButton .style.color = "red " ;

• Refs est le seul moyen fiable d'accéder aux nœuds DOM internes d'un composant ;

• Lorsque le code se termine, Refs sera automatiquement détruire la paire originale de composants enfants References ;

• Ne pas appeler Refs avant le rendu ou le rendu

• Ne pas abuser de Refs.

• 6. Mixins d'opérations partagées entre composants indépendants

Fonction : fonctions communes et partage de code entre différents composants ; 🎜>

Mixin d'installation du projet :
• npm install –save réagissez-mixin@2

• Importer le plugin : importez ReactMixin depuis 'react-mixin' ;

• Créez un nouveau fichier partagé - stockez un grand nombre de fonctions ou de propriétés publiques

Partout où vous en avez besoin ; , utilisez simplement ce composant
• import MixinLog from './mixin.js';

• Attribuer la collection d'objets partagés MixinLog au prototype du composant actuel : ReactMixin(BodyIndex.prototype, MixinLog);

• Faire des appels de fonction correspondant aux différents besoins C'est tel que : MixinLog.log().

• Caractéristiques : a un cycle de vie similaire à celui de la page, et est exécuté plusieurs fois après avoir été appelé plusieurs fois.

7. Résumé

Cet article donne principalement une brève introduction à l'utilisation des attributs d'état de React et à la vérification et à la réutilisation des composants. Vous pouvez télécharger le logiciel. accédez au dossier actuel dans le panneau de commande, puis exécutez npm install pour installer tous les environnements. Une fois l'installation terminée, exécutez webpack –watch et le projet sera prêt à être exécuté.

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois React User Manual pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous). .

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!