From 5ff926c58ede6f5bae78e7f1df9521d33f623c00 Mon Sep 17 00:00:00 2001 From: Lionel JAMAL Date: Mon, 11 Mar 2019 11:00:39 +0100 Subject: [PATCH 1/6] First translation --- content/docs/forwarding-refs.md | 67 +++++++++---------- .../customized-display-name.js | 4 +- examples/forwarding-refs/fancy-button-ref.js | 10 +-- .../fancy-button-simple-ref.js | 4 +- examples/forwarding-refs/fancy-button.js | 4 +- examples/forwarding-refs/log-props-after.js | 12 ++-- examples/forwarding-refs/log-props-before.js | 4 +- 7 files changed, 51 insertions(+), 54 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 3318d8499..538e8c071 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,76 +1,73 @@ --- id: forwarding-refs -title: Forwarding Refs +title: Transfert de Refs permalink: docs/forwarding-refs.html --- -Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below. +Le transfert de Ref est une technique permettant de transmettre automatiquement une [ref](/docs/refs-and-the-dom.html) d'un composant à l'un de ses enfants. Ça n'est généralement pas nécessaire pour la plupart des composants dans une application. Cependant, cela peut être utile pour certains types de composants, particulièrement dans les bibliothèques de composant réutilisable. Les scénarios les plus communs sont décrits ci-dessous. -## Forwarding refs to DOM components {#forwarding-refs-to-dom-components} +## Transfert de refs vers des composants du DOM {#forwarding-refs-to-dom-components} -Consider a `FancyButton` component that renders the native `button` DOM element: +Prenons un composant `FancyButton` qui affiche l'élément DOM natif `button` : `embed:forwarding-refs/fancy-button-simple.js` -React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much. +Les composants React masquent leurs détails d'implémentation, y compris leur sortie du moteur de rendu. *(Dans la suite de cet article, pour des raisons de concision, nous emploierons le terme générique anglais renderer sans italiques, NdT)* +Les autres composants utilisant `FancyButton` **n'auront généralement pas besoin** [d'obtenir une ref](/docs/refs-and-the-dom.html) à l'intérieur de l'élément du DOM `button`. C'est une bonne chose, car ça empêche les composants de trop s'appuyer sur la structure du DOM des uns et des autres. -Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations. +Bien qu'une telle encapsulation soit souhaitable pour les composants au niveau de l'application tels que `FeedStory` ou `Comment`, elle peut être gênante pour les composants hautement réutilisables, tels que `FancyButton` ou `MyTextInput`. Ces composants ont tendance à être utilisés dans l’application de la même manière qu’un `bouton` et un `input` « normaux », et l’accès à leurs nœuds DOM peut être inévitable pour la gestion du focus, de la sélection ou des animations. -**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.** - -In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders: +**Le transfert de Ref est une fonctionnalité d’inscription qui permet à certains composants de prendre une `ref` qu’ils reçoivent et de les passer plus loin (en d’autres termes, « les transférer ») à un enfant.** +Dans l'exemple ci-dessous, `FancyButton` utilise `React.forwardRef` pour obtenir la `ref` qui lui est transmise, puis le transfère au DOM `button` qu'il render : `embed:forwarding-refs/fancy-button-simple-ref.js` -This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly. +De cette façon, les composants utilisant `FancyButton` peuvent obtenir une ref au nœud du DOM sous-jacent `button` et y accéder si nécessaire, comme s'ils utilisaient directement un `bouton` DOM. -Here is a step-by-step explanation of what happens in the above example: +Voici une explication étape par étape de ce qui se passe dans l'exemple ci-dessus : -1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable. -1. We pass our `ref` down to `` by specifying it as a JSX attribute. -1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument. -1. We forward this `ref` argument down to ` )); -// You can now get a ref directly to the DOM button: +// Vous pouvez maintenant obtenir une ref directement attaché au bouton DOM: const ref = React.createRef(); -Click me!; +Cliquez moi !; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 9dcd13e16..47b73d59f 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -6,7 +6,7 @@ class FancyButton extends React.Component { // ... } -// Rather than exporting FancyButton, we export LogProps. -// It will render a FancyButton though. +// Plutôt que d'exporter FancyButton, nous exportons LogProps. +// Cependant, le render sera un FancyButton. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index a603bd697..c13b80dac 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -1,23 +1,23 @@ function logProps(Component) { class LogProps extends React.Component { componentDidUpdate(prevProps) { - console.log('old props:', prevProps); - console.log('new props:', this.props); + console.log('anciennes props:', prevProps); + console.log('nouvelles props:', this.props); } render() { // highlight-next-line const {forwardedRef, ...rest} = this.props; - // Assign the custom prop "forwardedRef" as a ref + // Affecte la prop personnalisée "forwardedRef" en tant que ref // highlight-next-line return ; } } - // Note the second param "ref" provided by React.forwardRef. - // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef" - // And it can then be attached to the Component. + // Notez le deuxième paramètre "ref" fourni par "React.forwardRef". + // Nous pouvons le transmettre à LogProps comme une prop normale, par exemple "forwardedRef" + // Et il peut ensuite être attaché au composant. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ; diff --git a/examples/forwarding-refs/log-props-before.js b/examples/forwarding-refs/log-props-before.js index a507e818b..3a7d1bdec 100644 --- a/examples/forwarding-refs/log-props-before.js +++ b/examples/forwarding-refs/log-props-before.js @@ -2,8 +2,8 @@ function logProps(WrappedComponent) { class LogProps extends React.Component { componentDidUpdate(prevProps) { - console.log('old props:', prevProps); - console.log('new props:', this.props); + console.log('anciennes props:', prevProps); + console.log('nouvelles props:', this.props); } render() { From d17a1a9ade4ac6483216b8096788336a37d1a9a8 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Fri, 15 Mar 2019 19:14:18 +0100 Subject: [PATCH 2/6] Apply suggestions from code review Co-Authored-By: yasakura --- content/docs/forwarding-refs.md | 46 +++++++++---------- examples/forwarding-refs/fancy-button-ref.js | 8 ++-- .../fancy-button-simple-ref.js | 4 +- examples/forwarding-refs/fancy-button.js | 2 +- examples/forwarding-refs/log-props-after.js | 8 ++-- examples/forwarding-refs/log-props-before.js | 4 +- 6 files changed, 36 insertions(+), 36 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index 538e8c071..cdfea3e86 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -1,73 +1,73 @@ --- id: forwarding-refs -title: Transfert de Refs +title: Transfert de refs permalink: docs/forwarding-refs.html --- -Le transfert de Ref est une technique permettant de transmettre automatiquement une [ref](/docs/refs-and-the-dom.html) d'un composant à l'un de ses enfants. Ça n'est généralement pas nécessaire pour la plupart des composants dans une application. Cependant, cela peut être utile pour certains types de composants, particulièrement dans les bibliothèques de composant réutilisable. Les scénarios les plus communs sont décrits ci-dessous. +Le transfert de ref est une technique permettant de déléguer automatiquement une [ref](/docs/refs-and-the-dom.html) d'un composant à l'un de ses enfants. Ça n'est généralement pas nécessaire pour la plupart des composants dans une application. Cependant, ça peut être utile pour certains types de composants, particulièrement dans les bibliothèques de composants réutilisables. Les scénarios les plus fréquents sont décrits ci-dessous. ## Transfert de refs vers des composants du DOM {#forwarding-refs-to-dom-components} Prenons un composant `FancyButton` qui affiche l'élément DOM natif `button` : `embed:forwarding-refs/fancy-button-simple.js` -Les composants React masquent leurs détails d'implémentation, y compris leur sortie du moteur de rendu. *(Dans la suite de cet article, pour des raisons de concision, nous emploierons le terme générique anglais renderer sans italiques, NdT)* -Les autres composants utilisant `FancyButton` **n'auront généralement pas besoin** [d'obtenir une ref](/docs/refs-and-the-dom.html) à l'intérieur de l'élément du DOM `button`. C'est une bonne chose, car ça empêche les composants de trop s'appuyer sur la structure du DOM des uns et des autres. +Les composants React masquent leurs détails d'implémentation, y compris leur rendu. +Les autres composants utilisant `FancyButton` **n'auront généralement pas besoin** [d'obtenir une ref](/docs/refs-and-the-dom.html) sur l'élément DOM interne `button`. C'est une bonne chose, car ça empêche les composants de trop s'appuyer sur la structure DOM les uns et des autres. -Bien qu'une telle encapsulation soit souhaitable pour les composants au niveau de l'application tels que `FeedStory` ou `Comment`, elle peut être gênante pour les composants hautement réutilisables, tels que `FancyButton` ou `MyTextInput`. Ces composants ont tendance à être utilisés dans l’application de la même manière qu’un `bouton` et un `input` « normaux », et l’accès à leurs nœuds DOM peut être inévitable pour la gestion du focus, de la sélection ou des animations. +Bien qu'une telle encapsulation soit souhaitable pour les composants applicatifs tels que `FeedStory` ou `Comment`, elle peut être gênante pour les composants hautement réutilisables, tels que `FancyButton` ou `MyTextInput`. Ces composants ont tendance à être utilisés un peu partout dans dans l’application de manière similaire à un `button` ou un `input`, et l’accès à leurs nœuds DOM peut s'avérer nécessaire pour la gestion du focus, de la sélection ou des animations. -**Le transfert de Ref est une fonctionnalité d’inscription qui permet à certains composants de prendre une `ref` qu’ils reçoivent et de les passer plus loin (en d’autres termes, « les transférer ») à un enfant.** +**Le transfert de ref est une fonctionnalité optionnelle qui permet à certains composants de prendre une `ref` qu’ils reçoivent et de la passer plus bas dans l’arbre (en d’autres termes, la « transférer ») à un composant enfant.** -Dans l'exemple ci-dessous, `FancyButton` utilise `React.forwardRef` pour obtenir la `ref` qui lui est transmise, puis le transfère au DOM `button` qu'il render : +Dans l'exemple ci-dessous, `FancyButton` utilise `React.forwardRef` pour obtenir la `ref` qui lui est passée, puis la transfère au `button` DOM qu'il affiche : `embed:forwarding-refs/fancy-button-simple-ref.js` -De cette façon, les composants utilisant `FancyButton` peuvent obtenir une ref au nœud du DOM sous-jacent `button` et y accéder si nécessaire, comme s'ils utilisaient directement un `bouton` DOM. +De cette façon, les composants utilisant `FancyButton` peuvent obtenir une ref sur le nœud DOM `button` sous-jacent et y accéder si nécessaire, comme s'ils utilisaient directement un `button` DOM. Voici une explication étape par étape de ce qui se passe dans l'exemple ci-dessus : 1. Nous créons une [ref React](/docs/refs-and-the-dom.html) en appelant `React.createRef` et l'affectons à une variable `ref`. -1. Nous passons notre `ref` à `` en le spécifiant comme un attribut JSX. +1. Nous passons notre `ref` à `` en la spécifiant comme un attribut JSX. 1. React transmet la `ref` à la fonction `(props, ref) => ...` à l'intérieur de `forwardRef` comme deuxième argument. 1. Nous transférons cet argument `ref` au ` )); -// Vous pouvez maintenant obtenir une ref directement attaché au bouton DOM: +// Vous pouvez maintenant obtenir une ref directement attachée au bouton DOM : const ref = React.createRef(); -Cliquez moi !; +Cliquez ici; diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js index 47b73d59f..68dd670ad 100644 --- a/examples/forwarding-refs/fancy-button.js +++ b/examples/forwarding-refs/fancy-button.js @@ -7,6 +7,6 @@ class FancyButton extends React.Component { } // Plutôt que d'exporter FancyButton, nous exportons LogProps. -// Cependant, le render sera un FancyButton. +// Cependant, ça affichera tout de même un FancyButton. // highlight-next-line export default logProps(FancyButton); diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index c13b80dac..ac8e2bec2 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -1,8 +1,8 @@ function logProps(Component) { class LogProps extends React.Component { componentDidUpdate(prevProps) { - console.log('anciennes props:', prevProps); - console.log('nouvelles props:', this.props); + console.log('Anciennes props :', prevProps); + console.log('Nouvelles props :', this.props); } render() { @@ -15,8 +15,8 @@ function logProps(Component) { } } - // Notez le deuxième paramètre "ref" fourni par "React.forwardRef". - // Nous pouvons le transmettre à LogProps comme une prop normale, par exemple "forwardedRef" + // Remarquez le deuxième paramètre `ref` fourni par `React.forwardRef`. + // Nous pouvons le passer à LogProps comme une prop normale, par exemple `forwardedRef` // Et il peut ensuite être attaché au composant. // highlight-range{1-3} return React.forwardRef((props, ref) => { diff --git a/examples/forwarding-refs/log-props-before.js b/examples/forwarding-refs/log-props-before.js index 3a7d1bdec..aebef5c8d 100644 --- a/examples/forwarding-refs/log-props-before.js +++ b/examples/forwarding-refs/log-props-before.js @@ -2,8 +2,8 @@ function logProps(WrappedComponent) { class LogProps extends React.Component { componentDidUpdate(prevProps) { - console.log('anciennes props:', prevProps); - console.log('nouvelles props:', this.props); + console.log('Anciennes props :', prevProps); + console.log('Nouvelles props :', this.props); } render() { From 2265d396041ddd41659b2482e395d1f5d4036746 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Sat, 16 Mar 2019 14:37:08 +0100 Subject: [PATCH 3/6] Final tweaks: main text --- content/docs/forwarding-refs.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md index cdfea3e86..a5c0c250e 100644 --- a/content/docs/forwarding-refs.md +++ b/content/docs/forwarding-refs.md @@ -8,7 +8,7 @@ Le transfert de ref est une technique permettant de déléguer automatiquement u ## Transfert de refs vers des composants du DOM {#forwarding-refs-to-dom-components} -Prenons un composant `FancyButton` qui affiche l'élément DOM natif `button` : +Prenons un composant `FancyButton` qui affiche l'élément DOM natif `button` : `embed:forwarding-refs/fancy-button-simple.js` Les composants React masquent leurs détails d'implémentation, y compris leur rendu. @@ -23,7 +23,7 @@ Dans l'exemple ci-dessous, `FancyButton` utilise `React.forwardRef` pour obtenir De cette façon, les composants utilisant `FancyButton` peuvent obtenir une ref sur le nœud DOM `button` sous-jacent et y accéder si nécessaire, comme s'ils utilisaient directement un `button` DOM. -Voici une explication étape par étape de ce qui se passe dans l'exemple ci-dessus : +Voici une explication étape par étape de ce qui se passe dans l'exemple ci-dessus : 1. Nous créons une [ref React](/docs/refs-and-the-dom.html) en appelant `React.createRef` et l'affectons à une variable `ref`. 1. Nous passons notre `ref` à `` en la spécifiant comme un attribut JSX. @@ -33,19 +33,19 @@ Voici une explication étape par étape de ce qui se passe dans l'exemple ci-des >Remarque > -> Le second argument `ref` n’existe que quand vous définissez un composant avec l'appel à `React.forwardRef`. Les fonctions composants habituelles et les composants à base de classe ne reçoivent pas l'argument `ref`, et la ref n'est pas non plus disponible dans les props. +> Le second argument `ref` n’existe que quand vous définissez un composant avec l'appel à `React.forwardRef`. Les fonctions composants habituelles et les composants à base de classes ne reçoivent pas l'argument `ref`, et la ref n'est pas non plus disponible dans les props du composant. > -> Le transfert de références n'est pas limité aux composants DOM. Vous pouvez aussi transférer des refs vers des instances de classe de composant. +> Le transfert de refs n'est pas limité aux composants DOM. Vous pouvez aussi transférer des refs vers des instances de classe de composant. ## Note pour les mainteneurs de bibliothèques de composants {#note-for-component-library-maintainers} **Lorsque vous commencez à utiliser `forwardRef` dans une bibliothèque de composants, vous devez le traiter comme une rupture de compatibilité ascendante et publier une nouvelle version majeure de votre bibliothèque.** En effet, votre bibliothèque a probablement un comportement différent (par exemple la cible d'affectation des refs et la nature des types exportés), et ça pourrait casser les applications et autres bibliothèques qui dépendent de l'ancien comportement. -L'application conditionnelle de `React.forwardRef` lorsqu'elle existe est également déconseillée pour les mêmes raisons : ça modifie le comportement de votre bibliothèque et pourrait casser les applications de vos utilisateurs lorsqu'ils mettent à jour React. +L'application conditionnelle de `React.forwardRef` lorsqu'elle existe est également déconseillée pour les mêmes raisons : ça modifie le comportement de votre bibliothèque et pourrait casser les applications de vos utilisateurs lorsqu'ils mettent à jour React. ## Transfert des refs dans les composants d’ordre supérieur {#forwarding-refs-in-higher-order-components} -Cette technique peut aussi être particulièrement utile avec les [composants d'ordre supérieur](/docs/higher-order-components.html) *(Higher-Order Components ou HOC, NdT)*. Commençons par un exemple de HOC qui journalise les props du composant dans la console : +Cette technique peut aussi être particulièrement utile avec les [composants d'ordre supérieur](/docs/higher-order-components.html) *(Higher-Order Components ou HOC, NdT)*. Commençons par un exemple de HOC qui journalise les props du composant dans la console : `embed:forwarding-refs/log-props-before.js` Le HOC `logProps` transmet toutes les `props` au composant qu'il enrobe, ainsi le résultat affiché sera la même. Par exemple, nous pouvons utiliser ce HOC pour lister toutes les props transmises à notre composant *fancy button* : @@ -53,21 +53,21 @@ Le HOC `logProps` transmet toutes les `props` au composant qu'il enrobe, ainsi l Il y a une limitation dans l'exemple ci-dessus : les refs ne seront pas transférées. C'est parce que `ref` n'est pas une prop. Comme `key`, elle est gérée différemment par React. Si vous ajoutez une ref à un HOC, la ref fera référence au composant conteneur extérieur, et non au composant enrobé. -Ça signifie que les refs destinées à notre composant `FancyButton` seront en réalité attachées au composant `LogProps` : +Ça signifie que les refs destinées à notre composant `FancyButton` seront en réalité attachées au composant `LogProps` : `embed:forwarding-refs/fancy-button-ref.js` -Heureusement, nous pouvons explicitement transférer les refs au composant `FancyButton` interne à l’aide de l’API `React.forwardRef`. Celle-ci accepte une fonction de rendu qui reçoit les arguments `props` et `ref` et renvoie un nœud React. Par exemple : +Heureusement, nous pouvons explicitement transférer les refs au composant `FancyButton` interne à l’aide de l’API `React.forwardRef`. Celle-ci accepte une fonction de rendu qui reçoit les arguments `props` et `ref` et renvoie un nœud React. Par exemple : `embed:forwarding-refs/log-props-after.js` ## Affichage d'un nom personnalisé dans les DevTools {#displaying-a-custom-name-in-devtools} `React.forwardRef` accepte une fonction de rendu. Les outils de développement React *(React DevTools, NdT)* utilisent cette fonction pour déterminer quoi afficher pour le composant de transfert de ref. -Par exemple, le composant suivant apparaîtra sous le nom "*ForwardRef*" dans les DevTools : +Par exemple, le composant suivant apparaîtra sous le nom "*ForwardRef*" dans les DevTools : `embed:forwarding-refs/wrapped-component.js` -Si vous nommez la fonction de rendu, les DevTools incluront également son nom (par exemple, "*ForwardRef(myFunction)*") : +Si vous nommez la fonction de rendu, les DevTools incluront également son nom (par exemple, "*ForwardRef(myFunction)*") : `embed:forwarding-refs/wrapped-component-with-function-name.js` -Vous pouvez même définir la propriété `displayName` de la fonction pour y inclure le composant que vous enrobez : +Vous pouvez même définir la propriété `displayName` de la fonction pour y inclure le composant que vous enrobez : `embed:forwarding-refs/customized-display-name.js` From 5b5e8e9618bc412df8edbd12a4c825b81a7cae68 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Sat, 16 Mar 2019 14:37:51 +0100 Subject: [PATCH 4/6] Final tweaks: example 1/4 --- examples/forwarding-refs/customized-display-name.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/forwarding-refs/customized-display-name.js b/examples/forwarding-refs/customized-display-name.js index 41ef823c1..ae89b6f55 100644 --- a/examples/forwarding-refs/customized-display-name.js +++ b/examples/forwarding-refs/customized-display-name.js @@ -7,7 +7,7 @@ function logProps(Component) { return ; } - // Donne à ce composant un nom d'affichage plus utile dans les DevTools. + // Donne à ce composant un nom d’affichage plus utile dans les DevTools. // exemple : "ForwardRef(logProps(MyComponent))" // highlight-range{1-2} const name = Component.displayName || Component.name; From a0420068dbcbfbd6ca3163102b4b4ffb62cd47bc Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Sat, 16 Mar 2019 14:38:22 +0100 Subject: [PATCH 5/6] Final tweaks: example 2/4 --- examples/forwarding-refs/fancy-button-ref.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/examples/forwarding-refs/fancy-button-ref.js b/examples/forwarding-refs/fancy-button-ref.js index 13f5ad01b..afe0ca604 100644 --- a/examples/forwarding-refs/fancy-button-ref.js +++ b/examples/forwarding-refs/fancy-button-ref.js @@ -3,11 +3,10 @@ import FancyButton from './FancyButton'; // highlight-next-line const ref = React.createRef(); -// Le composant FancyButton que nous avons importé est le HOC LogProps. -// Même si l’affichage sera le même, -// Notre ref visera LogProps au lieu du composant FancyButton ! -// Ça signifie par exemple que nous ne pouvons pas appeler ref.current.focus() -// highlight-range{4} +// Le composant FancyButton que nous avons importé est le HOC LogProps. Même si +// l’affichage sera le même, notre ref visera LogProps au lieu du composant +// FancyButton ! Ça signifie par exemple que nous ne pouvons pas appeler +// ref.current.focus() highlight-range{4} Date: Sat, 16 Mar 2019 14:38:48 +0100 Subject: [PATCH 6/6] Final tweaks: example 3/3 --- examples/forwarding-refs/log-props-after.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js index ac8e2bec2..7509956b3 100644 --- a/examples/forwarding-refs/log-props-after.js +++ b/examples/forwarding-refs/log-props-after.js @@ -15,9 +15,9 @@ function logProps(Component) { } } - // Remarquez le deuxième paramètre `ref` fourni par `React.forwardRef`. - // Nous pouvons le passer à LogProps comme une prop normale, par exemple `forwardedRef` - // Et il peut ensuite être attaché au composant. + // Remarquez le deuxième paramètre `ref` fourni par `React.forwardRef`. Nous + // pouvons le passer à LogProps comme une prop normale, par exemple + // `forwardedRef`. Et il peut ensuite être attaché au composant. // highlight-range{1-3} return React.forwardRef((props, ref) => { return ;