Quelles sont les utilisations des références de composants React ? Explication détaillée du rôle des références de composants de réaction et de son utilisation

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 }
                    />
           

        );
    }
});
ReactDOM.render(
    ,
document.getElementById('content')
);

在这个例子中， render 函数返回一个 Il s'agit de this.refs. myTextInput获取。只要 render 返回的某个子组件带有 ref="myTextInput" ，this.refs. myTextInput就会获取到正确的实例。

上面就是ref的所有内容，更多关于ref的介绍可以参考Ref to Components。

本篇文章到这就结束了（想看更多就到PHP中文网

React使用手册栏目中学习），有问题的可以在下方留言提问。

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!