Comment utiliser les références dans React –

Les refs sont une fonctionnalité React qui vous permet d’accéder directement aux nœuds DOM créés par un composant render() méthode. Ils fournissent un moyen de sortir du rendu déclaratif de React afin que vous puissiez appeler les API du navigateur.

Lorsque vous travaillez avec React, vous déclarez généralement à quoi devrait ressembler le DOM d’un composant en utilisant JSX:

class MyComponent extends React.Component {
 
    state = {value: ""};
 
    handleChange = e => this.setState({value: e.target.value});
 
    render() {
        return (
            <div>
                <h1>Hello World!</h1>
                <input
                    onChange={this.handleChange}
                    value={this.state.value} />
            </div>
        );
    }
 
};

En interne, React transpile le JSX pour déterminer comment manipuler le DOM. Il utilisera des fonctions de navigateur telles que document.createElement() et document.appendChild() pour créer la structure DOM que vous avez déclarée.

Cela simplifie considérablement le code dont vous avez besoin pour mettre à jour le DOM par programme. Pour modifier des éléments, vous changez leurs accessoires ou mettez à jour l’état d’un composant. React calcule ensuite les différences et rend les ajustements DOM nécessaires.

Le cas des réfs

Vous n’avez normalement pas accès aux nœuds DOM créés par React. Dans l’exemple ci-dessus, nous n’avons aucun descripteur des éléments que nous avons créés. Cela devient problématique si vous souhaitez appeler une API DOM qui ne peut pas être accédée de manière déclarative via les accessoires React.

Considérons ce qui se passe si l’utilisateur entre une valeur invalide dans l’entrée de texte. S’ils cliquent ensuite sur Soumettre sous une forme réelle, ce serait une bonne idée d’afficher un message d’erreur et de remettre le focus dans la saisie de texte. Vous ne pouvez pas faire cela sans accéder au nœud DOM de l’entrée. Vous devez appeler le focus() méthode sur cet élément.

Entrez les réf. Les références vous offrent un moyen de première classe d’obtenir une «référence» aux nœuds DOM de React. Vous pouvez résoudre le problème de focus en attribuant une référence à l’entrée. Les références sont des objets avec un current propriété qui contient le nœud DOM auquel ils font référence.

Créer une référence

Les références sont généralement créées explicitement en appelant React.createRef(). Vous les affectez ensuite à une instance de composant à l’aide de la fonction spéciale ref soutenir. Ce n’est pas un véritable accessoire et n’est pas accessible par le composant.

class DemoComponent extends React.Component {
 
    inputRef = React.createRef();
 
    focusInput = () => this.inputRef?.current.focus();
 
    render() {
        return (
            <div>
                <input ref={this.inputRef} />
                <button onClick={this.focusInput} />
            </div>
        );
    }
 
}

La référence est attribuée à la propriété d’instance inputRef. Celui-ci est ensuite remis au input élément en définissant son ref soutenir. Lorsque vous cliquez sur le bouton, le focusInput() La méthode est appelée. Cela accède au current propriété de la référence, qui contient le nœud DOM réel de l’entrée. Il peut maintenant appeler focus() pour concentrer le champ de texte.

Le current la propriété des refs peut être null. Cela se produit lorsque la référence n’est pas affectée à un élément DOM rendu. Dans cet exemple, inputRef.current sera null jusqu’à ce que le render() est appelée et l’entrée récupère la référence. Pour cette raison, l’opérateur de chaînage optionnel (?.) est utilisé dans focusInput() pour gérer gracieusement le scénario où la référence ne fait encore référence à rien.

Attribution de références aux composants React

L’exemple ci-dessus montre comment les références fonctionnent lorsqu’elles sont utilisées avec des éléments HTML simples. Vous pouvez également affecter une référence aux instances de composant React. Cela vous permet d’appeler directement les méthodes définies par les enfants que vous rendez.

class View extends React.Component {
 
    state = {
        error: true;    // Example!
    };
 
    formRef = React.createRef();
 
    focusForm = () => this.formRef?.current.focusInput();
 
    submit = () => {
        if (this.state.error) {
            alert("There was an error; check your input.");
            this.focusForm();
        }
    };
 
    render() {
        return (
            <div>
                <Form ref={this.formRef} />
                <Button onClick={this.submit} />
            </div>
        );
    }
 
}
 
class Form extends React.Component {
 
    inputRef = React.createRef();
 
    focusInput() {
        this.inputRef.current?.focus();
    }
 
    render() {
        return <input ref={this.inputRef} />
    }
}

Dans ce scénario, le current propriété du formRef dans View ne fait pas référence à un nœud DOM. Au lieu de cela, il fait référence au Form instance de composant qui a été rendue.

Vous devez faire attention lorsque vous utilisez cette approche. Passez toujours les données aux composants enfants via des accessoires, au lieu d’utiliser des refs comme système de rappel.

En règle générale, une référence doit être utilisée lorsqu’une interaction directe avec le DOM est inévitable. Cela reste vrai lors de l’affectation d’une référence à une instance de composant React. Vous ne devriez pas appeler des méthodes de composants arbitraires via une référence.

Notre exemple répond à cette exigence – Form est un composant de présentation, alors que View est un conteneur complexe qui pourrait rendre plusieurs formulaires. Il doit être en mesure de mettre l’accent sur les champs problématiques, même s’il ne les rend pas directement. La solution est d’utiliser un composant ref avec précaution, en s’assurant que l’utilisation est justifiée par un besoin de manipuler le DOM.

Réf et composants fonctionnels

Les composants fonctionnels ne peuvent pas recevoir de réf. Ils n’ont pas d’instances donc il n’y a rien à assigner à la référence. Cependant, vous peut utiliser le transfert pour rediriger une référence vers un composant DOM.

Le transfert de référence est une fonctionnalité facultative qui permet à un composant de transmettre une référence qu’il reçoit à l’un des enfants qu’il rend. Pour transférer une référence, enveloppez votre composant avec un appel à React’s forwardRef() fonction:

const InputComponent = React.forwardRef((props, ref) => (
    <input ref={ref} value={props.value} />
));

forwardRef() accepte une fonction qui doit renvoyer un composant React. La fonction sera appelée quand elle aura besoin de rendre et se verra passer deux paramètres: ses accessoires et sa référence transmise.

Utilisation des références dans les composants fonctionnels

Bien que les composants fonctionnels ne puissent pas recevoir directement les références, ils peuvent les créer avec le useRef() accrocher. Cela équivaut au createRef() méthode disponible dans les composants de classe.

const InputComponent = props => {
    const ref = useRef();
    return <input ref={ref} value={props.value} />
};

Surtout, useRef() peut être utilisé pour plus que de simples références. Son véritable rôle est de fournir un moyen de persistance des données entre les appels à un composant fonctionnel. Il renvoie un objet avec un current propriété que React conserve et restaure ensuite à chaque rendu du composant.

Vous pouvez donc utiliser useRef() pour conserver les données arbitraires dans les composants fonctionnels. Met le current propriété de l’objet retourné à la valeur que vous souhaitez conserver.

Références de rappel

Une dernière façon de travailler avec les refs est d’utiliser le modèle de «rappel». Avec cette approche, vous n’avez pas besoin d’appeler manuellement createRef() ou useRef(). Au lieu de cela, vous définissez le ref prop à une fonction que React appellera lors du rendu. Il passera le nœud DOM de l’élément comme seul argument de la fonction.

class CallbackRef extends React.Component {
    render() {
        return <input ref={el => this.inputRef = el} />
    }
}

C’est une manière plus concise de créer des références qui sont affectées aux propriétés d’instance. Votre fonction reçoit directement le nœud DOM – il n’y a pas .current à manipuler, contrairement à createRef().

Conclusion

React Refs vous permet de gérer des scénarios que vous ne pouvez pas résoudre avec le rendu déclaratif seul. Ils sont votre chemin pour diriger la manipulation DOM lorsque vous travaillez avec des formulaires, la lecture multimédia et des animations. Vous vous retrouverez également à chercher des références si vous avez besoin d’intégrer une bibliothèque JavaScript tierce qui n’a pas été conçue pour React.

Bien que les références soient flexibles, vous ne devez pas en abuser. Avant de créer une référence, vérifiez vos composants pour vous assurer que vous ne pouvez pas atteindre votre objectif de manière déclarative.

Les références sont une partie nécessaire de React mais elles contredisent les principes de la bibliothèque. Trop de références peuvent rapidement compliquer la maintenance de votre application. Ils vous permettent de briser le flux de données descendant que les accessoires appliquent généralement.