Skip to content

Commit

Permalink
Merge pull request #537 from reactjs/copy/unmountComponentAtNode
Browse files Browse the repository at this point in the history
Translation of the `unmountComponentAtNode` page
  • Loading branch information
tdd authored Jul 20, 2023
2 parents 6a8df77 + b3c681b commit 118ee5f
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions src/content/reference/react-dom/unmountComponentAtNode.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ title: unmountComponentAtNode

<Deprecated>

This API will be removed in a future major version of React.
Cette API sera retirée d'une future version majeure de React.

In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
React 18 a remplacé `unmountComponentAtNode` par [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).

</Deprecated>

<Intro>

`unmountComponentAtNode` removes a mounted React component from the DOM.
`unmountComponentAtNode` retire un composant React monté du DOM.

```js
unmountComponentAtNode(domNode)
Expand All @@ -24,11 +24,11 @@ unmountComponentAtNode(domNode)

---

## Reference {/*reference*/}
## Référence {/*reference*/}

### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}

Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
Appelez `unmountComponentAtNode` pour retirer un composant React monté du DOM et nettoyer ses gestionnaires d'événements et son état.

```js
import { unmountComponentAtNode } from 'react-dom';
Expand All @@ -39,21 +39,21 @@ render(<App />, domNode);
unmountComponentAtNode(domNode);
```

[See more examples below.](#usage)
[Voir d'autres exemples ci-dessous](#usage).

#### Parameters {/*parameters*/}
#### Paramètres {/*parameters*/}

* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
* `domNode` : un [élément DOM](https://developer.mozilla.org/docs/Web/API/Element). React retirera le composant React monté à partir de cet élément.

#### Returns {/*returns*/}
#### Valeur renvoyée {/*returns*/}

`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
`unmountComponentAtNode` renvoie `true` si un composant a été démonté, ou `false` dans le cas contraire.

---

## Usage {/*usage*/}
## Utilisation {/*usage*/}

Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
Appelez `unmountComponentAtNode` pour retirer un <CodeStep step={1}>composant React monté</CodeStep> à partir d'un <CodeStep step={2}>nœud DOM du navigateur</CodeStep> et nettoyer ses gestionnaires d'événements et son état.

```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
import { render, unmountComponentAtNode } from 'react-dom';
Expand All @@ -67,22 +67,22 @@ unmountComponentAtNode(rootNode);
```


### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
### Retirer une appli React d'un élément DOM {/*removing-a-react-app-from-a-dom-element*/}

Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
Vous souhaiterez occasionnellement « saupoudrer » du React dans une page existante, ou une page qui n'est pas intégralement écrite en React. Dans de tels cas, vous pourriez avoir besoin « d'arrêter » une appli React en retirant toute son interface utilisateur (UI), son état et ses gestionnaires d'événements du nœud DOM dans lequel elle avait été affichée.

In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
Dans l'exemple ci-dessous, cliquez sur « Afficher l'appli React » pour… afficher l'appli React. Cliquez sur « Démonter l'appli React » pour la détruire :

<Sandpack>

```html index.html
<!DOCTYPE html>
<html>
<head><title>My app</title></head>
<head><title>Mon appli</title></head>
<body>
<button id='render'>Render React App</button>
<button id='unmount'>Unmount React App</button>
<!-- This is the React App node -->
<button id='render'>Afficher l’appli React</button>
<button id='unmount'>Démonter l’appli React</button>
<!-- Voici le nœud de l'appli React -->
<div id='root'></div>
</body>
</html>
Expand All @@ -106,7 +106,7 @@ document.getElementById('unmount').addEventListener('click', () => {

```js App.js
export default function App() {
return <h1>Hello, world!</h1>;
return <h1>Salut tout le monde !</h1>;
}
```

Expand Down

0 comments on commit 118ee5f

Please sign in to comment.