Skip to content

Commit

Permalink
copy(findDOMNode): final review pass
Browse files Browse the repository at this point in the history
  • Loading branch information
tdd committed Sep 7, 2023
1 parent 2d1391a commit 8801203
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 4 deletions.
1 change: 1 addition & 0 deletions TRANSLATORS.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
<li><a href="https://fr.react.dev/reference/react">Hooks fournis par React</a> (accueil chapitre)</li>
<li><a href="https://fr.react.dev/reference/react/lazy"><code>lazy</code></a></li>
<li><a href="https://fr.react.dev/reference/react/memo"><code>memo</code></a></li>
<li><a href="https://fr.react.dev/reference/react-dom/findDOMNode"><code>findDOMNode</code></a></li>
</ul>
</td>
</tr>
Expand Down
8 changes: 4 additions & 4 deletions src/content/reference/react-dom/findDOMNode.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const domNode = findDOMNode(componentInstance)

### `findDOMNode(componentInstance)` {/*finddomnode*/}

Appelez `findDOMNode` pour trouver le nœud DOM associé à une instance de [composant React à base de classe](/reference/react/Component) donnée.
Appelez `findDOMNode` pour trouver le nœud DOM le plus proche associé à une instance de [composant React à base de classe](/reference/react/Component) donnée.

```js
import { findDOMNode } from 'react-dom';
Expand Down Expand Up @@ -166,7 +166,7 @@ export default AutoselectingInput;

</Sandpack>

Ce code plantera parce que désormais, `findDOMNode(this)` trouvera le nœud DOM `<div>` alors qu'il s'attend à un nœud DOM `<input>`. Pour éviter ce genre de problème, utilisez [`createRef`](/reference/react/createRef) pour gérer un nœud DOM spécifique.
Ce code plantera parce que désormais, car `findDOMNode(this)` trouvera le nœud DOM `<div>` alors qu'il s'attend à un nœud DOM `<input>`. Pour éviter ce genre de problème, utilisez [`createRef`](/reference/react/createRef) pour gérer un nœud DOM spécifique.

Dans cet exemple, `findDOMNode` n'est plus utilisé. On utilise plutôt `inputRef = createRef(null)` pour définir un champ d'instance. Pour y lire le nœud DOM, vous pouvez utiliser `this.inputRef.current`. Pour le rattacher au JSX, vous mettez dans votre rendu `<input ref={this.inputRef} />`. Ça connecte le code utilisant le nœud DOM à son JSX :

Expand Down Expand Up @@ -313,7 +313,7 @@ Pour remplacer `findDOMNode` dans cet exemple, les deux composants doivent se co
1. `AutoSelectingInput` doit déclarer une ref, comme dans [l'exemple précédent](#reading-components-own-dom-node-from-a-ref), et la fournir à `<MyInput>`.
2. `MyInput` doit être déclaré avec [`forwardRef`](/reference/react/forwardRef) pour prendre cette ref et la transmettre au nœud `<input>`.

C'est ce que fait cette version, qui n'a donc plus besoin de `findDOMNode` :
C'est ce que fait cette version, qui n'a donc plus besoin de `findDOMNode` :

<Sandpack>

Expand Down Expand Up @@ -369,7 +369,7 @@ export default MyInput;

</Sandpack>

Voici à quoi ressemblerait ce code avec des fonctions composants au lieu de classes :
Voici à quoi ressemblerait ce code avec des fonctions composants au lieu de classes :

<Sandpack>

Expand Down

0 comments on commit 8801203

Please sign in to comment.