You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
*`render`: The render function for your component. React calls this function with the props and `ref` that your component received from its parent. The JSX you return will be the output of your component.
36
+
#### Paramètres {/*parameters*/}
38
37
39
-
#### Returns {/*returns*/}
38
+
*`render` : la fonction de rendu de votre composant. React appellera cette fonction avec les props et la `ref` que votre composant aura reçu de son parent. Cette fonction renvoie, comme d'habitude, le JSX constitutif du composant.
40
39
41
-
`forwardRef` returns a React component that you can render in JSX. Unlike React components defined as plain functions, a component returned by `forwardRef` is also able to receive a `ref` prop.
40
+
#### Valeur renvoyée {/*returns*/}
42
41
43
-
#### Caveats {/*caveats*/}
42
+
`forwardRef` renvoie un composant React qui peut figurer dans un rendu JSX. Contrairement aux composants React définis par des fonctions classiques, un composant renvoyé par `forwardRef` pourra en prime accepter une prop `ref`.
44
43
45
-
* In Strict Mode, React will **call your render function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your render function is pure (as it should be), this should not affect the logic of your component. The result from one of the calls will be ignored.
44
+
#### Limitations {/*caveats*/}
46
45
46
+
* En mode strict, React **appellera votre fonction composant deux fois** afin de [vous aider à repérer des impuretés accidentelles](#my-initializer-or-updater-function-runs-twice). Ce comportement est limité au développement et n'affecte pas la production. Une des valeurs renvoyées sera ignorée. Si votre fonction composant est pure (ce qui devrait être le cas), ça n'affectera en rien son comportement.
47
47
48
48
---
49
49
50
-
### `render` function {/*render-function*/}
50
+
### La fonction `render` {/*render-function*/}
51
51
52
-
`forwardRef`accepts a render function as an argument. React calls this function with`props`and`ref`:
52
+
`forwardRef`accepte une fonction de rendu en argument. React appellera cette fonction avec`props`et`ref`:
*`props`: The props passed by the parent component.
67
+
*`props` : les props passées par le composant parent.
68
68
69
-
*`ref`: The`ref`attribute passed by the parent component. The`ref`can be an object or a function. If the parent component has not passed a ref, it will be `null`. You should either pass the `ref`you receive to another component, or pass it to[`useImperativeHandle`.](/reference/react/useImperativeHandle)
69
+
*`ref` : la prop`ref`passée par le composant parent. La`ref`peut être un objet ou une fonction. Si le composant parent n'a pas passé de ref, elle sera `null`. Vous pouvez soit passer la `ref`reçue à un autre composant soit la passer à[`useImperativeHandle`](/reference/react/useImperativeHandle).
70
70
71
-
#### Returns {/*render-returns*/}
71
+
#### Valeur renvoyée {/*render-returns*/}
72
72
73
-
`forwardRef`returns a React component that you can render in JSX. Unlike React components defined as plain functions, the component returned by`forwardRef`is able to take a `ref` prop.
73
+
`forwardRef`renvoie un composant React qui peut figurer dans un rendu JSX. Contrairement aux composants React définis par des fonctions classiques, un composant renvoyé par`forwardRef`pourra en prime accepter une prop `ref`.
74
74
75
75
---
76
76
77
-
## Usage {/*usage*/}
77
+
## Utilisation {/*usage*/}
78
78
79
-
### Exposing a DOM node to the parent component {/*exposing-a-dom-node-to-the-parent-component*/}
79
+
### Exposer un nœud DOM au composant parent {/*exposing-a-dom-node-to-the-parent-component*/}
80
80
81
-
By default, each component's DOM nodes are private. However, sometimes it's useful to expose a DOM node to the parent--for example, to allow focusing it. To opt in, wrap your component definition into `forwardRef()`:
81
+
Par défaut, tous les nœuds DOM de votre composant sont privés. Ceci dit, il peut parfois être utile d'exposer un nœud DOM à votre parent — par exemple pour en permettre l'activation. Pour permettre ça, enrobez votre définition de composant avec `forwardRef()`:
<MyInput label="Saisissez votre nom :" ref={ref} />
126
126
<button type="button" onClick={handleClick}>
127
-
Edit
127
+
Modifier
128
128
</button>
129
129
</form>
130
130
);
131
131
}
132
132
```
133
133
134
-
This `Form`component [passes a ref](/reference/react/useRef#manipulating-the-dom-with-a-ref)to`MyInput`. The `MyInput`component *forwards* that ref to the `<input>` browser tag. As a result, the `Form`component can access that `<input>`DOM node and call[`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on it.
134
+
Le composant `Form`[passe une ref](/reference/react/useRef#manipulating-the-dom-with-a-ref)à`MyInput`. Le composant `MyInput`*transmet* cette ref à la balise native `<input>`. Résultat, le composant `Form`peut accéder au nœud DOM `<input>`et appeler sa méthode[`focus()`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/focus).
135
135
136
-
Keep in mind that exposing a ref to the DOM node inside your component makes it harder to change your component's internals later. You will typically expose DOM nodes from reusable low-level components like buttons or text inputs, but you won't do it for application-level components like an avatar or a comment.
136
+
Gardez à l'esprit qu'exposer une ref vers un nœud DOM au sein de votre composant peut vous embêter plus tard si vous souhaitez refondre la structure interne de celui-ci. Classiquement, vous exposerez des nœuds DOM depuis des composants réutilisables de bas niveau tels que des boutons ou des champs de saisie, mais vous éviterez de le faire pour des composants applicatifs comme un avatar ou un bloc de commentaire.
137
137
138
-
<Recipestitle="Examples of forwarding a ref">
138
+
<Recipestitle="Exemples de transmission de ref">
139
139
140
-
#### Focusing a text input {/*focusing-a-text-input*/}
140
+
#### Activer un champ de saisie {/*focusing-a-text-input*/}
141
141
142
-
Clicking the button will focus the input. The `Form`component defines a ref and passes it to the `MyInput` component. The `MyInput`component forwards that ref to the browser `<input>`. This lets the `Form`component focus the`<input>`.
142
+
Un clic sur le bouton activera le champ de saisie. Le composant `Form`définit une ref qu'il passe au composant `MyInput`. Ce composant `MyInput`transmet la ref au `<input>` du navigateur. Ça permet au composant `Form`d'activer le`<input>`.
143
143
144
144
<Sandpack>
145
145
@@ -156,9 +156,9 @@ export default function Form() {
156
156
157
157
return (
158
158
<form>
159
-
<MyInput label="Enter your name:" ref={ref} />
159
+
<MyInput label="Saisissez votre nom :" ref={ref} />
160
160
<button type="button" onClick={handleClick}>
161
-
Edit
161
+
Modifier
162
162
</button>
163
163
</form>
164
164
);
@@ -191,9 +191,9 @@ input {
191
191
192
192
<Solution />
193
193
194
-
#### Playing and pausing a video {/*playing-and-pausing-a-video*/}
194
+
#### Lire et mettre en pause une vidéo {/*playing-and-pausing-a-video*/}
195
195
196
-
Clicking the button will call [`play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play)and[`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)on a `<video>` DOM node. The `App`component defines a ref and passes it to the `MyVideoPlayer` component. The `MyVideoPlayer`component forwards that ref to the browser `<video>`node. This lets the `App`component play and pause the`<video>`.
196
+
Ici un clic sur le bouton appellera les méthodes [`play()`](https://developer.mozilla.org/fr/docs/Web/API/HTMLMediaElement/play)et[`pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause)d'un nœud DOM `<video>`. Le composant `App`définit une ref qu'il passe au composant `MyVideoPlayer`. Ce composant `MyVideoPlayer`transmet cette ref au nœud `<video>`du navigateur. Ça permet au composant `App`de lire et mettre en pause la`<video>`.
197
197
198
198
<Sandpack>
199
199
@@ -206,7 +206,7 @@ export default function App() {
If that `MyInput`component forwards a ref to its`<input>`, a ref to`FormField`will give you that `<input>`:
271
+
Si ce composant `MyInput`transmet une ref à son`<input>`, une ref à`FormField`vous donnera ce `<input>`:
272
272
273
273
```js {2,5,10}
274
274
functionForm() {
@@ -280,16 +280,16 @@ function Form() {
280
280
281
281
return (
282
282
<form>
283
-
<FormField label="Enter your name:" ref={ref} isRequired={true} />
283
+
<FormField label="Saisissez votre nom :" ref={ref} isRequired={true} />
284
284
<button type="button" onClick={handleClick}>
285
-
Edit
285
+
Modifier
286
286
</button>
287
287
</form>
288
288
);
289
289
}
290
290
```
291
291
292
-
The `Form`component defines a ref and passes it to`FormField`. The `FormField`component forwards that ref to`MyInput`, which forwards it to a browser`<input>` DOM node. This is how `Form`accesses that DOM node.
292
+
Le composant `Form`définit une ref et la passer au`FormField`. Le composant `FormField`transmet cette ref au`MyInput`, qui la transmet au nœud DOM`<input>`. C'est ainsi que `Form`accède à ce nœud DOM.
293
293
294
294
295
295
<Sandpack>
@@ -307,9 +307,9 @@ export default function Form() {
307
307
308
308
return (
309
309
<form>
310
-
<FormField label="Enter your name:" ref={ref} isRequired={true} />
310
+
<FormField label="Saisissez votre nom :" ref={ref} isRequired={true} />
### Exposing an imperative handle instead of a DOM node {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
370
+
### Exposer un point d'accès impératif plutôt qu'un nœud DOM {/*exposing-an-imperative-handle-instead-of-a-dom-node*/}
371
371
372
-
Instead of exposing an entire DOM node, you can expose a custom object, called an *imperative handle,* with a more constrained set of methods. To do this, you'd need to define a separate ref to hold the DOM node:
372
+
Au lieu d'exposer l'intégralité du nœud DOM, vous pouvez exposer un objet personnalisé qu'on appelle *point d'accès impératif*, doté d'un jeu plus restreint de méthodes. Pour cela, vous devez définir une ref séparée pour référencer le nœud DOM:
Pass the`ref`you received to [`useImperativeHandle`](/reference/react/useImperativeHandle)and specify the value you want to expose to the `ref`:
384
+
Passez la`ref`que vous avez reçue à [`useImperativeHandle`](/reference/react/useImperativeHandle)et spécifiez la valeur que vous souhaitez exposer en tant que `ref`:
If some component gets a ref to`MyInput`, it will only receive your `{ focus, scrollIntoView }`object instead of the DOM node. This lets you limit the information you expose about your DOM node to the minimum.
407
+
Si un composant récupère la ref de`MyInput`, il ne recevra que votre objet `{ focus, scrollIntoView }`au lieu du nœud DOM. Ça vous permet de limiter au minimum les parties du nœud DOM que vous exposez.
408
408
409
409
<Sandpack>
410
410
@@ -417,15 +417,16 @@ export default function Form() {
417
417
418
418
functionhandleClick() {
419
419
ref.current.focus();
420
-
// This won't work because the DOM node isn't exposed:
420
+
// Ça ne marchera pas parce que le nœud DOM
421
+
// n'est pas exposé :
421
422
// ref.current.style.opacity = 0.5;
422
423
}
423
424
424
425
return (
425
426
<form>
426
-
<MyInput label="Enter your name:" ref={ref} />
427
+
<MyInput label="Saisissez votre nom :" ref={ref} />
427
428
<button type="button" onClick={handleClick}>
428
-
Edit
429
+
Modifier
429
430
</button>
430
431
</form>
431
432
);
@@ -463,25 +464,26 @@ input {
463
464
464
465
</Sandpack>
465
466
466
-
[Read more about using imperative handles.](/reference/react/useImperativeHandle)
467
+
[En savoir plus sur les points d'accès impératifs](/reference/react/useImperativeHandle).
467
468
468
469
<Pitfall>
469
470
470
-
**Do not overuse refs.** You should only use refs for *imperative* behaviors that you can't express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.
471
471
472
-
**If you can express something as a prop, you should not use a ref.** For example, instead of exposing an imperative handle like `{ open, close }` from a `Modal` component, it is better to take `isOpen` as a prop like `<Modal isOpen={isOpen} />`. [Effects](/learn/synchronizing-with-effects) can help you expose imperative behaviors via props.
472
+
**N'abusez pas des refs.** Vous ne devriez utiliser des refs que pour des comportements *impératifs* qui ne peuvent pas être exprimés par des props : faire défiler jusqu'à un nœud, activer un nœud, déclencher une animation, sélectionner un texte, et ainsi de suite.
473
+
474
+
**Si vous pouvez exprimer quelque chose sous forme de prop, n'utilisez pas une ref.** Par exemple, plutôt que d'exposer un objet impératif du genre `{ open, close }` depuis un composant `Modal`, préférez proposer une prop `isOpen` pour une utilisation du style `<Modal isOpen={isOpen} />`. [Les Effets](/learn/synchronizing-with-effects) peuvent vous aider à exposer des comportements impératifs au travers de props.
473
475
474
476
</Pitfall>
475
477
476
478
---
477
479
478
-
## Troubleshooting {/*troubleshooting*/}
480
+
## Dépannage {/*troubleshooting*/}
479
481
480
-
### My component is wrapped in`forwardRef`, but the`ref`to it is always`null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
482
+
### Mon composant est enrobé par`forwardRef`, mais la`ref`que je reçois est toujours`null` {/*my-component-is-wrapped-in-forwardref-but-the-ref-to-it-is-always-null*/}
481
483
482
-
This usually means that you forgot to actually use the `ref` that you received.
484
+
Ça signifie généralement que vous avez oublié d'utiliser effectivement la ref que vous avez reçue.
483
485
484
-
For example, this component doesn't do anything with its`ref`:
486
+
Par exemple, ce composant ne fait rien avec sa`ref`:
If`showInput`is`false`, then the ref won't be forwarded to any node, and a ref to`MyInput`will remain empty. This is particularly easy to miss if the condition is hidden inside another component, like`Panel`in this example:
525
+
Si`showInput`est`false`, alors la ref ne sera transmise à aucun nœud, et la ref à`MyInput`restera vide. C'est particulièrement difficile à repérer si la condition est enfouie dans un autre composant, comme`Panel`dans l'exemple ci-après :
0 commit comments