Refs est le raccourci utilisé pour les références dans Réagir. C'est similaire à clés dans Réagir. C'est un attribut qui permet de stocker une référence à des nœuds DOM ou des éléments React particuliers. Il fournit un moyen d'accéder aux nœuds React DOM ou aux éléments React et comment interagir avec eux. Il est utilisé lorsque l'on souhaite modifier la valeur d'un composant enfant, sans utiliser d'accessoires.
Quand utiliser les références
Les références peuvent être utilisées dans les cas suivants :
- Lorsque nous avons besoin de mesures DOM telles que la gestion du focus, la sélection de texte ou la lecture multimédia.
- Il est utilisé pour déclencher des animations impératives.
- Lors de l'intégration avec des bibliothèques DOM tierces.
- Il peut également être utilisé comme dans les rappels.
Quand ne pas utiliser les références
- Son utilisation doit être évitée pour tout ce qui peut être fait de manière déclarative . Par exemple, au lieu d'utiliser ouvrir() et fermer() méthodes sur un composant Dialog, vous devez passer un est ouvert accessoire à cela.
- Vous devriez éviter de surutiliser les références.
Comment créer des références
Dans React, les références peuvent être créées en utilisant Réagir.createRef() . Il peut être attribué aux éléments React via le réf attribut. Il est généralement attribué à une propriété d'instance lors de la création d'un composant, puis peut être référencé dans l'ensemble du composant.
class MyComponent extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); } render() { return ; } } Comment accéder aux références
Dans React, lorsqu'une référence est passée à un élément dans la méthode de rendu, une référence au nœud est accessible via l'attribut actuel de la référence.
const node = this.callRef.current;
Réf. Propriétés actuelles
La valeur ref diffère selon le type de nœud :
- Lorsque l'attribut ref est utilisé dans un élément HTML, la référence créée avec Réagir.createRef() reçoit l'élément DOM sous-jacent comme son actuel propriété.
- Si l'attribut ref est utilisé sur un composant de classe personnalisé, alors l'objet ref reçoit le monté instance du composant comme propriété actuelle.
- L'attribut ref ne peut pas être utilisé sur composants fonctionnels parce qu'ils n'ont pas d'instances.
Ajouter une référence aux éléments DOM
Dans l'exemple ci-dessous, nous ajoutons une référence pour stocker la référence à un nœud ou un élément DOM.
import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRef = React.createRef(); this.addingRefInput = this.addingRefInput.bind(this); } addingRefInput() { this.callRef.current.focus(); } render() { return ( <h2>Adding Ref to DOM element</h2> ); } } export default App; Sortir
Ajouter une référence aux composants de classe
Dans l'exemple ci-dessous, nous ajoutons une référence pour stocker la référence à un composant de classe.
Exemple
import React, { Component } from 'react'; import { render } from 'react-dom'; function CustomInput(props) { let callRefInput = React.createRef(); function handleClick() { callRefInput.current.focus(); } return ( <h2>Adding Ref to Class Component</h2> ); } class App extends React.Component { constructor(props) { super(props); this.callRefInput = React.createRef(); } focusRefInput() { this.callRefInput.current.focus(); } render() { return ( ); } } export default App; Sortir
Références de rappel
En réaction, il existe une autre façon d'utiliser les références appelée ' références de rappel ' et cela donne plus de contrôle lorsque les arbitres sont ensemble et désarmé . Au lieu de créer des références par la méthode createRef(), React permet de créer des références en passant une fonction de rappel à l'attribut ref d'un composant. Cela ressemble au code ci-dessous.
this.callRefInput = element} />
La fonction de rappel est utilisée pour stocker une référence au nœud DOM dans une propriété d'instance et est accessible ailleurs. Il est accessible comme ci-dessous :
this.callRefInput.value
L'exemple ci-dessous aide à comprendre le fonctionnement des références de rappel.
import React, { Component } from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(props) { super(props); this.callRefInput = null; this.setInputRef = element => { this.callRefInput = element; }; this.focusRefInput = () => { //Focus the input using the raw DOM API if (this.callRefInput) this.callRefInput.focus(); }; } componentDidMount() { //autofocus of the input on mount this.focusRefInput(); } render() { return ( <h2>Callback Refs Example</h2> ); } } export default App; Dans l'exemple ci-dessus, React appellera le rappel 'ref' pour stocker la référence à l'élément DOM d'entrée lorsque le composant monte , et lorsque le composant démonte , appelle-le avec nul . Les références sont toujours à jour avant le composantDidMount ou composantDidUpdate les feux. Les références de rappel transmises entre les composants sont les mêmes que celles que vous pouvez utiliser avec les références d'objet, qui sont créées avec React.createRef().
Sortir
Transfert de référence d'un composant à un autre composant
Le transfert de référence est une technique utilisée pour transmettre un réf via un composant vers l’un de ses composants enfants. Elle peut être réalisée en utilisant le Réagir.forwardRef() méthode. Cette technique est particulièrement utile avec composants d'ordre supérieur et spécialement utilisé dans les bibliothèques de composants réutilisables. L’exemple le plus courant est donné ci-dessous.
Exemple
import React, { Component } from 'react'; import { render } from 'react-dom'; const TextInput = React.forwardRef((props, ref) => ( )); const inputRef = React.createRef(); class CustomTextInput extends React.Component { handleSubmit = e => { e.preventDefault(); console.log(inputRef.current.value); }; render() { return ( this.handleSubmit(e)}> Submit ); } } export default App; Dans l'exemple ci-dessus, il y a un composant Saisie de texte qui a un enfant comme champ de saisie. Maintenant, pour transmettre ou transférer le réf jusqu'à l'entrée, créez d'abord une référence, puis transmettez votre référence à . Après cela, React transmet la référence au forwardRef fonctionner comme un deuxième argument. Ensuite, nous transmettons cet argument de référence à . Désormais, la valeur du nœud DOM est accessible sur inputRef.courant .
Réagissez avec useRef()
Il est introduit dans Réagir 16.7 et version supérieure. Cela aide à accéder au nœud ou à l'élément DOM, puis nous pouvons interagir avec ce nœud ou cet élément DOM, par exemple en concentrant l'élément d'entrée ou en accédant à la valeur de l'élément d'entrée. Il renvoie l'objet ref dont .actuel propriété initialisée à l’argument passé. L'objet renvoyé persiste pendant toute la durée de vie du composant.
Syntaxe
const refContainer = useRef(initialValue);
Exemple
Dans le code ci-dessous, utiliserRef est une fonction qui est affectée à une variable, inputRef , puis attaché à un attribut appelé ref à l'intérieur de l'élément HTML dans lequel vous souhaitez faire référence.
function useRefExample() { const inputRef= useRef(null); const onButtonClick = () => { inputRef.current.focus(); }; return ( Submit ); }