Cet article explique principalement l'explication détaillée des références des composants react Jetons maintenant un ?il au contenu du texte

Comme son nom l'indique, nous savons. qu'en fait cela peut être Le stand est une référence pour un composant, qui peut aussi être considéré comme un logo. En tant qu'attribut de composant, sa valeur d'attribut peut être une cha?ne ou une fonction.

En fait, l'utilisation de ref n'est pas nécessaire. Même dans les scénarios où cela est applicable, ce n'est pas nécessaire, car les fonctions implémentées à l'aide de ref peuvent également être converties en d'autres méthodes. Cependant, puisque ref a ses scénarios applicables, cela signifie que ref a ses propres avantages. Concernant cela et les scénarios applicables de ref, la documentation officielle dit ceci?:

Après avoir renvoyé la structure de l'interface utilisateur à partir de la méthode de rendu, vous souhaiterez peut-être sortir des limitations du DOM virtuel React et utiliser l'instance de composant. renvoyé par render Appel de certaines méthodes. De manière générale, cela n'est pas nécessaire pour le flux de données dans l'application, car le flux de données réactif garantit toujours que les derniers accessoires sont transmis à chaque sortie enfant de render(). Cependant, il existe encore plusieurs scénarios dans lesquels l'utilisation de cette approche est nécessaire ou bénéfique?: trouver le balisage DOM du composant rendu (qui peut être considéré comme l'ID d'identification DOM), utiliser des composants React dans une grande application non-React ou convertir votre code existant dans React.

Regardons un tel scénario (l'exemple suivant est souvent utilisé pour expliquer ref, on voit donc que le scénario décrit ci-dessous devrait être plus classique)?: utiliser un événement pour faire le est définie sur la cha?ne vide et l'élément

var App = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleChange: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
this.setState({userInput: ''}); Pour la cha?ne vide > // Ici, vous souhaitez obtenir le focus
},
render: function () {
Return (
& lt; p & gt;
& lt ; entrée
value={this.state.userInput}
onChange={this.handleChange}
/>
="Réinitialiser et mettre au point"
onClick ={this.clearAndFocusInput}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ?? ? ? ? ?? ? ?? ????? ??????? ? ????????????????? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Cliquer sur le bouton demande à l'élément d'entrée de définir la valeur sur la cha?ne vide, mais cela n'a pas encore été implémenté pour permettre à l'élément d'entrée d'obtenir le focus. C'est un peu difficile à implémenter car ce qui est renvoyé dans render() n'est pas la combinaison réelle de sous-composants, juste une description d'une instance spécifique à un moment précis. Cette phrase semble assez déroutante. En fait, ce que le rendu renvoie est le

DOM virtuel

, pas le vrai DOM. Nous n'avons donc pas besoin de nous concentrer uniquement sur les composants renvoyés par render().

En parlant de ?a, cela ne nous aide pas beaucoup à nous concentrer. Pour réaliser la fonction de mise au point, nous devons utiliser la réf. Nous avons mentionné ci-dessus qu'il existe deux types de valeurs de référence, l'une est une cha?ne et l'autre est une fonction de rappel.

attribut de cha?ne de référence

React prend en charge un attribut spécial que vous pouvez ajouter à n'importe quel composant renvoyé par render(). Cela signifie que le composant renvoyé par render() est marqué afin que l'instance du composant puisse être facilement localisée. C'est à cela que sert la référence.

ref est sous la forme de

Pour accéder à cette instance, vous pouvez y accéder via this.refs?:

this.refs.myInput

Dans les versions précédentes, nous pouvions accéder au DOM du composant via React.findDOMNode(this.refs.myInput). Mais maintenant, la fonction findDOMNode a été abandonnée et est accessible directement en utilisant this.refs.myInput. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois colonne React Reference Manual pour en savoir)

fonction de rappel ref

La ref L'attribut peut également être une fonction de rappel au lieu d'un nom. Cette fonction sera exécutée immédiatement après le montage du composant. Le composant référencé sera utilisé comme paramètre de la fonction, qui pourra utiliser le paramètre du composant immédiatement ou l'enregistrer pour une utilisation ultérieure.

Le formulaire est également relativement simple?:

render: function() {
return this._input = c} } /> ;
},
componentDidMount?: function() {
this._input.focus();
},

ou

render?: function() {
return (
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},

Il convient de noter ici que lorsque ce composant de référence est déchargé et que cette référence change, la valeur du paramètre de la référence précédente sera nulle. Cela empêchera efficacement les fuites de mémoire. Par conséquent, il y aura un jugement if dans le code ci-dessus?:

if(input != null){
input.focus();
}

Ce qui précède décrit le scénarios d'utilisation de la réf et des méthodes, ci-dessous nous compléterons l'exemple ci-dessus pour réaliser la fonction d'obtention de focus

var App = React.createClass({
??? getInitialState: function() {
??????? return {userInput: ''};
??? },
??? handleChange: function(e) {
??????? this .setState({userInput: e.target.value});
??? },
??? clearAndFocusInput: function() {
??????? this.setState({userInput: ''}); // Effacer l'entrée
??????? // Nous souhaitons focaliser le maintenant?!
??????? if (this.refs.myTextInput !== null) {
??????????? this.refs.myTextInput.focus();
??????? }
??? },
??? render: function() {
??????? return (
???????????

? ???????????????????????????????? value={this. state.userInput}
??????????????????? onChange={this .handleChange}
??????????????????? ref=”myTextInput”??????
?????????????????????????????????????? />
??????????????? ??????????????????? type="bouton"
?? ?????????????????value="Réinitialiser et mettre au point"
???????????????????? onClick={this.clearAndFocusInput }
??????????????????? />
???????????