From f47ff853058dbce31af95397cb787483b02e54c9 Mon Sep 17 00:00:00 2001 From: Nina Alin <56309556+nina-alin@users.noreply.github.com> Date: Fri, 25 Aug 2023 13:29:51 +0200 Subject: [PATCH 1/5] feat: translation of create portal --- .../reference/react-dom/createPortal.md | 105 +++++++++--------- 1 file changed, 52 insertions(+), 53 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 006f78a9a..97d5b573c 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -4,8 +4,7 @@ title: createPortal -`createPortal` lets you render some children into a different part of the DOM. - +`createPortal` vous permet d'afficher certains enfants dans une partie différente du DOM. ```js
@@ -20,11 +19,11 @@ title: createPortal --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `createPortal(children, domNode, key?)` {/*createportal*/} -To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered: +Pour créer un portal, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être rendu : ```js import { createPortal } from 'react-dom'; @@ -32,53 +31,53 @@ import { createPortal } from 'react-dom'; // ...
-

This child is placed in the parent div.

+

Cet enfant est placé dans la div parente.

{createPortal( -

This child is placed in the document body.

, +

Cet enfant est placé dans le body du document.

, document.body )}
``` -[See more examples below.](#usage) +[Voir plus d'exemples ci-dessous](#usage). -A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events bubble up from children to parents according to the React tree. +Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autres cas, le JSX que vous rendez dans un portal agit comme un nœud enfant du composant React qui le rend. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre de React. -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `children`: Anything that can be rendered with React, such as a piece of JSX (e.g. `
` or ``), a [Fragment](/reference/react/Fragment) (`<>...`), a string or a number, or an array of these. +* `children`: quelque chose qui peut être rendu avec React, comme un morceau de JSX (par exemple `
` ou ``), un [Fragment](/reference/react/Fragment) (`<>...`), une chaîne ou un nombre, ou un tableau de ces éléments. -* `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated. +* `domNode`: un nœud DOM, comme ceux retournés par `document.getElementById()`. Le nœud doit déjà exister. Passer un nœud DOM différent lors d'une mise à jour entraînera la recréation du contenu du portal. -* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key) +* **optionnel** `key`: une chaîne ou un nombre unique à utiliser comme [clé](/learn/rendering-lists/#keeping-list-items-in-order-with-key) du portal. -#### Returns {/*returns*/} +#### Valeur renvoyée {/*returns*/} -`createPortal` returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children` inside the provided `domNode`. +`createPortal` renvoie un nœud React qui peut être inclus dans le JSX ou renvoyé par un composant React. Si React le voit dans la sortie du rendu, il placera les `children` fournis à l'intérieur du `domNode` fourni. -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -* Events from portals propagate according to the React tree rather than the DOM tree. For example, if you click inside a portal, and the portal is wrapped in `
`, that `onClick` handler will fire. If this causes issues, either stop the event propagation from inside the portal, or move the portal itself up in the React tree. +* Les événements des portals se propagent en prenant pour appui l'arbre de React, plutôt que l'arbre du DOM. Par exemple, si vous cliquez à l'intérieur d'un portal, et que le portal est englobé dans une `
`, ce gestionnaire `onClick` sera déclenché. Si ça pose des problèmes, arrêtez la propagation de l'événement à l'intérieur du portal, ou déplacez le portal lui-même dans l'arbre de React. --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Rendering to a different part of the DOM {/*rendering-to-a-different-part-of-the-dom*/} +### Afficher dans une partie différente du DOM {/*rendering-to-a-different-part-of-the-dom*/} -*Portals* let your components render some of their children into a different place in the DOM. This lets a part of your component "escape" from whatever containers it may be in. For example, a component can display a modal dialog or a tooltip that appears above and outside of the rest of the page. +Les *Portals* permettent à vos composants d'afficher certains de leurs enfants dans un endroit différent du DOM. Ça permet à une partie de votre composant de "s'échapper" de tous les conteneurs dans lesquels il peut se trouver. Par exemple, un composant peut afficher une boîte de dialogue modale ou une info-bulle qui apparaît au-dessus et en dehors du reste de la page. -To create a portal, render the result of `createPortal` with some JSX and the DOM node where it should go: +Pour créer un portal, affichez le résultat de `createPortal` avec du JSX et le nœud DOM où il doit aller : -```js [[1, 8, "

This child is placed in the document body.

"], [2, 9, "document.body"]] +```js [[1, 8, "

Cet enfant est placé dans le body du document.

"], [2, 9, "document.body"]] import { createPortal } from 'react-dom'; function MyComponent() { return (
-

This child is placed in the parent div.

+

Cet enfant est placé dans la div parente.

{createPortal( -

This child is placed in the document body.

, +

Cet enfant est placé dans le body du document.

, document.body )}
@@ -86,9 +85,9 @@ function MyComponent() { } ``` -React will put the DOM nodes for the JSX you passed inside of the DOM node you provided. +React placera les nœuds DOM pour le JSX que vous avez passé à l'intérieur du nœud DOM que vous avez fourni. -Without a portal, the second `

` would be placed inside the parent `

`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body) +Sans portal, le second `

` serait placé à l'intérieur de la `

` parente, mais le portal l'a "téléporté" dans le [`document.body`](https://developer.mozilla.org/fr/docs/Web/API/Document/body) : @@ -98,9 +97,9 @@ import { createPortal } from 'react-dom'; export default function MyComponent() { return (
-

This child is placed in the parent div.

+

Cet enfant est placé dans la div parente.

{createPortal( -

This child is placed in the document body.

, +

Cet enfant est placé dans le body du document.

, document.body )}
@@ -110,30 +109,30 @@ export default function MyComponent() { -Notice how the second paragraph visually appears outside the parent `
` with the border. If you inspect the DOM structure with developer tools, you'll see that the second `

` got placed directly into the ``: +Observez comment le second paragraphe apparaît visuellement en dehors de la `

` parente avec la bordure. Si vous inspectez la structure du DOM avec les outils de développement, vous verrez que le second `

` a été placé directement dans le `` : ```html {4-6,9}

...
-

This child is placed inside the parent div.

+

Cet enfant est placé dans la div parente.

...
-

This child is placed in the document body.

+

Cet enfant est placé dans le body du document.

``` -A portal only changes the physical placement of the DOM node. In every other way, the JSX you render into a portal acts as a child node of the React component that renders it. For example, the child can access the context provided by the parent tree, and events still bubble up from children to parents according to the React tree. +Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autres cas, le JSX que vous affichez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre de React. --- -### Rendering a modal dialog with a portal {/*rendering-a-modal-dialog-with-a-portal*/} +### Afficher une une boîte de dialogue modale avec un portal {/*rendering-a-modal-dialog-with-a-portal*/} -You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with `overflow: hidden` or other styles that interfere with the dialog. +Vous pouvez utiliser un portal pour créer une boîte de dialogue modale qui flotte au-dessus du reste de la page, même si le composant qui appelle la boîte de dialogue est à l'intérieur d'un conteneur avec `overflow: hidden` ou d'autres styles qui interfèrent avec la boîte de dialogue. -In this example, the two containers have styles that disrupt the modal dialog, but the one rendered into a portal is unaffected because, in the DOM, the modal is not contained within the parent JSX elements. +Dans cet exemple, les deux conteneurs ont des styles qui perturbent la boîte de dialogue modale, mais celui qui est rendu dans un portal n'est pas affecté car, dans le DOM, la boîte de dialogue modale n'est pas contenue dans les éléments JSX parents. @@ -164,7 +163,7 @@ export default function NoPortalExample() { return ( <> {showModal && ( setShowModal(false)} /> @@ -184,7 +183,7 @@ export default function PortalExample() { return ( <> {showModal && createPortal( setShowModal(false)} />, @@ -199,7 +198,7 @@ export default function PortalExample() { export default function ModalContent({ onClose }) { return (
-
I'm a modal dialog
+
Je suis une boîte de dialogue modale
); @@ -238,29 +237,29 @@ export default function ModalContent({ onClose }) { -It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way. +Il est important de s'assurer que votre application est accessible lors de l'utilisation de portals. Par exemple, vous devrez peut-être gérer le focus du clavier afin que l'utilisateur puisse déplacer le focus dans et hors du portal de manière naturelle. -Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines. +Suivez les [Bonnes Pratiques de la Création de Modales WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) lors de la création de modales. Si vous utilisez une librairie communautaire, assurez-vous qu'elle est accessible et qu'elle suit ces directives. --- -### Rendering React components into non-React server markup {/*rendering-react-components-into-non-react-server-markup*/} +### Afficher des composants React dans un balisage non-React côté serveur {/*rendering-react-components-into-non-react-server-markup*/} -Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM. +Les portals peuvent vous être utiles si votre racine React ne fait partie que d'une page statique ou affichée côté serveur qui n'est pas construite avec React. Par exemple, si votre page est construite avec un framework côté serveur comme Rails, vous pouvez créer des zones d'interactivité dans des zones statiques telles que des barres latérales. Par rapport à l'utilisation de [plusieurs racines React séparées](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react), les portals vous permettent de traiter l'application comme un seul arbre React avec un état partagé, même si ses parties sont rendues dans différentes parties du DOM. ```html index.html - My app + Mon application -

Welcome to my hybrid app

+

Bienvenue dans mon application hybride

- This is server non-React markup + Ceci est un balisage serveur n'appartenant pas à React.
@@ -301,11 +300,11 @@ export default function App() { } function MainContent() { - return

This part is rendered by React

; + return

Cette partie est affichée par React

; } function SidebarContent() { - return

This part is also rendered by React!

; + return

Cette partie est aussi affichée par React !

; } ``` @@ -342,15 +341,15 @@ p { --- -### Rendering React components into non-React DOM nodes {/*rendering-react-components-into-non-react-dom-nodes*/} +### Afficher des composants React dans des nœuds DOM n'appartenant pas à React {/*rendering-react-components-into-non-react-dom-nodes*/} -You can also use a portal to manage the content of a DOM node that's managed outside of React. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup. To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into: +Vous pouvez aussi utiliser un portal pour gérer le contenu d'un nœud DOM qui est géré en dehors de React. Par exemple, supposons que vous intégrez un widget de carte n'appartenant pas à React et que vous souhaitez afficher du contenu React dans une popup. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : ```js const [popupContainer, setPopupContainer] = useState(null); ``` -When you create the third-party widget, store the DOM node returned by the widget so you can render into it: +Lorsque vous créez le widget tiers, stockez le nœud DOM renvoyé par le widget afin de pouvoir y afficher du contenu : ```js {5-6} useEffect(() => { @@ -363,20 +362,20 @@ useEffect(() => { }, []); ``` -This lets you use `createPortal` to render React content into `popupContainer` once it becomes available: +Ça vous permet d'utiliser `createPortal` pour afficher du contenu React dans `popupContainer` une fois qu'il est disponible : ```js {3-6} return (
{popupContainer !== null && createPortal( -

Hello from React!

, +

Bonjour de React !

, popupContainer )}
); ``` -Here is a complete example you can play with: +Voici un exemple complet avec lequel vous pouvez vous amuser : @@ -420,7 +419,7 @@ export default function Map() { return (
{popupContainer !== null && createPortal( -

Hello from React!

, +

Bonjour de React !

, popupContainer )}
From 9e34488e61c6431b14136d2ea73a5bf2b12e9f74 Mon Sep 17 00:00:00 2001 From: Nina Alin <56309556+nina-alin@users.noreply.github.com> Date: Sat, 26 Aug 2023 12:54:43 +0000 Subject: [PATCH 2/5] fix: prefer using "affichage" instead of "rendu" --- src/content/reference/react-dom/createPortal.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 97d5b573c..0fe045ba7 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -23,7 +23,7 @@ title: createPortal ### `createPortal(children, domNode, key?)` {/*createportal*/} -Pour créer un portal, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être rendu : +Pour créer un portal, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être affiché : ```js import { createPortal } from 'react-dom'; @@ -41,11 +41,11 @@ import { createPortal } from 'react-dom'; [Voir plus d'exemples ci-dessous](#usage). -Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autres cas, le JSX que vous rendez dans un portal agit comme un nœud enfant du composant React qui le rend. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre de React. +Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autres cas, le JSX que vous affichez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre de React. #### Paramètres {/*parameters*/} -* `children`: quelque chose qui peut être rendu avec React, comme un morceau de JSX (par exemple `
` ou ``), un [Fragment](/reference/react/Fragment) (`<>...`), une chaîne ou un nombre, ou un tableau de ces éléments. +* `children`: quelque chose qui peut être affiché avec React, comme un morceau de JSX (par exemple `
` ou ``), un [Fragment](/reference/react/Fragment) (`<>...`), une chaîne ou un nombre, ou un tableau de ces éléments. * `domNode`: un nœud DOM, comme ceux retournés par `document.getElementById()`. Le nœud doit déjà exister. Passer un nœud DOM différent lors d'une mise à jour entraînera la recréation du contenu du portal. @@ -53,7 +53,7 @@ Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autre #### Valeur renvoyée {/*returns*/} -`createPortal` renvoie un nœud React qui peut être inclus dans le JSX ou renvoyé par un composant React. Si React le voit dans la sortie du rendu, il placera les `children` fournis à l'intérieur du `domNode` fourni. +`createPortal` renvoie un nœud React qui peut être inclus dans le JSX ou renvoyé par un composant React. Si React le voit dans la sortie de l'affichage, il placera les `children` fournis à l'intérieur du `domNode` fourni. #### Limitations {/*caveats*/} From 64923009d7ed4d1cbbdda60ec7241ff7e82a1c2c Mon Sep 17 00:00:00 2001 From: Nina Alin <56309556+nina-alin@users.noreply.github.com> Date: Tue, 29 Aug 2023 10:52:36 +0200 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- .../reference/react-dom/createPortal.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 0fe045ba7..2446b1b39 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -23,7 +23,7 @@ title: createPortal ### `createPortal(children, domNode, key?)` {/*createportal*/} -Pour créer un portal, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être affiché : +Pour créer un portail, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être affiché : ```js import { createPortal } from 'react-dom'; @@ -33,7 +33,7 @@ import { createPortal } from 'react-dom';

Cet enfant est placé dans la div parente.

{createPortal( -

Cet enfant est placé dans le body du document.

, +

Cet enfant est placé dans le corps du document.

, document.body )}
@@ -41,15 +41,15 @@ import { createPortal } from 'react-dom'; [Voir plus d'exemples ci-dessous](#usage). -Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autres cas, le JSX que vous affichez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre de React. +Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autres aspects, le JSX que vous placez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre React. #### Paramètres {/*parameters*/} -* `children`: quelque chose qui peut être affiché avec React, comme un morceau de JSX (par exemple `
` ou ``), un [Fragment](/reference/react/Fragment) (`<>...`), une chaîne ou un nombre, ou un tableau de ces éléments. +* `children` : quelque chose qui peut être affiché avec React, comme un morceau de JSX (par exemple `
` ou ``), un [Fragment](/reference/react/Fragment) (`<>...`), une chaîne de caractères ou un nombre, ou un tableau de tout ça. * `domNode`: un nœud DOM, comme ceux retournés par `document.getElementById()`. Le nœud doit déjà exister. Passer un nœud DOM différent lors d'une mise à jour entraînera la recréation du contenu du portal. -* **optionnel** `key`: une chaîne ou un nombre unique à utiliser comme [clé](/learn/rendering-lists/#keeping-list-items-in-order-with-key) du portal. +* `key` **optionnelle** : une chaîne de caractères ou un nombre, unique, à utiliser comme [clé](/learn/rendering-lists/#keeping-list-items-in-order-with-key) du portail. #### Valeur renvoyée {/*returns*/} @@ -57,7 +57,7 @@ Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autre #### Limitations {/*caveats*/} -* Les événements des portals se propagent en prenant pour appui l'arbre de React, plutôt que l'arbre du DOM. Par exemple, si vous cliquez à l'intérieur d'un portal, et que le portal est englobé dans une `
`, ce gestionnaire `onClick` sera déclenché. Si ça pose des problèmes, arrêtez la propagation de l'événement à l'intérieur du portal, ou déplacez le portal lui-même dans l'arbre de React. +* Les événements des portails se propagent en suivant l'arbre React, plutôt que l'arbre du DOM. Par exemple, si vous cliquez à l'intérieur d'un portail, et que le portail est situé dans une `
`, ce gestionnaire `onClick` sera déclenché. Si ça pose des problèmes, arrêtez la propagation de l'événement à l'intérieur du portail, ou déplacez le portail lui-même plus haut dans l'arbre React. --- @@ -65,11 +65,11 @@ Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autre ### Afficher dans une partie différente du DOM {/*rendering-to-a-different-part-of-the-dom*/} -Les *Portals* permettent à vos composants d'afficher certains de leurs enfants dans un endroit différent du DOM. Ça permet à une partie de votre composant de "s'échapper" de tous les conteneurs dans lesquels il peut se trouver. Par exemple, un composant peut afficher une boîte de dialogue modale ou une info-bulle qui apparaît au-dessus et en dehors du reste de la page. +Les *portails* permettent à vos composants d'afficher certains de leurs enfants dans un endroit différent du DOM. Ça permet à une partie de votre composant de « s'échapper » de tous les conteneurs dans lesquels elle peut se trouver. Par exemple, un composant peut afficher une boîte de dialogue modale ou une infobulle qui apparaît au-dessus et en-dehors du reste de la page. Pour créer un portal, affichez le résultat de `createPortal` avec du JSX et le nœud DOM où il doit aller : -```js [[1, 8, "

Cet enfant est placé dans le body du document.

"], [2, 9, "document.body"]] +```js [[1, 8, "

Cet enfant est placé dans le corps du document.

"], [2, 9, "document.body"]] import { createPortal } from 'react-dom'; function MyComponent() { @@ -77,7 +77,7 @@ function MyComponent() {

Cet enfant est placé dans la div parente.

{createPortal( -

Cet enfant est placé dans le body du document.

, +

Cet enfant est placé dans le corps du document.

, document.body )}
@@ -99,7 +99,7 @@ export default function MyComponent() {

Cet enfant est placé dans la div parente.

{createPortal( -

Cet enfant est placé dans le body du document.

, +

Cet enfant est placé dans le corps du document.

, document.body )}
@@ -109,7 +109,7 @@ export default function MyComponent() { -Observez comment le second paragraphe apparaît visuellement en dehors de la `
` parente avec la bordure. Si vous inspectez la structure du DOM avec les outils de développement, vous verrez que le second `

` a été placé directement dans le `` : +Observez comment le second paragraphe apparaît visuellement en-dehors de la `

` parente avec la bordure. Si vous inspectez la structure du DOM avec les outils de développement, vous verrez que le second `

` a été placé directement dans le `` : ```html {4-6,9} @@ -120,19 +120,19 @@ Observez comment le second paragraphe apparaît visuellement en dehors de la ` ...

-

Cet enfant est placé dans le body du document.

+

Cet enfant est placé dans le corps du document.

``` -Un portal ne change que l'emplacement physique du nœud DOM. Dans tous les autres cas, le JSX que vous affichez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre de React. +Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autres aspects, le JSX que vous placez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre React. --- -### Afficher une une boîte de dialogue modale avec un portal {/*rendering-a-modal-dialog-with-a-portal*/} +### Afficher une boîte de dialogue modale avec un portail {/*rendering-a-modal-dialog-with-a-portal*/} Vous pouvez utiliser un portal pour créer une boîte de dialogue modale qui flotte au-dessus du reste de la page, même si le composant qui appelle la boîte de dialogue est à l'intérieur d'un conteneur avec `overflow: hidden` ou d'autres styles qui interfèrent avec la boîte de dialogue. -Dans cet exemple, les deux conteneurs ont des styles qui perturbent la boîte de dialogue modale, mais celui qui est rendu dans un portal n'est pas affecté car, dans le DOM, la boîte de dialogue modale n'est pas contenue dans les éléments JSX parents. +Dans cet exemple, les deux conteneurs ont des styles qui perturbent la boîte de dialogue modale, mais celui qui est affiché *via* un portail n'est pas affecté car, dans le DOM, la boîte de dialogue modale n'est pas contenue dans les éléments JSX parents. @@ -239,24 +239,24 @@ export default function ModalContent({ onClose }) { Il est important de s'assurer que votre application est accessible lors de l'utilisation de portals. Par exemple, vous devrez peut-être gérer le focus du clavier afin que l'utilisateur puisse déplacer le focus dans et hors du portal de manière naturelle. -Suivez les [Bonnes Pratiques de la Création de Modales WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) lors de la création de modales. Si vous utilisez une librairie communautaire, assurez-vous qu'elle est accessible et qu'elle suit ces directives. +Suivez les [bonnes pratiques WAI-ARIA de création de modales](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) lors de la création de modales. Si vous utilisez un module communautaire, assurez-vous qu'il est accessible et qu'il suit ces directives. --- -### Afficher des composants React dans un balisage non-React côté serveur {/*rendering-react-components-into-non-react-server-markup*/} +### Afficher des composants React dans un balisage non-React issu du serveur {/*rendering-react-components-into-non-react-server-markup*/} -Les portals peuvent vous être utiles si votre racine React ne fait partie que d'une page statique ou affichée côté serveur qui n'est pas construite avec React. Par exemple, si votre page est construite avec un framework côté serveur comme Rails, vous pouvez créer des zones d'interactivité dans des zones statiques telles que des barres latérales. Par rapport à l'utilisation de [plusieurs racines React séparées](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react), les portals vous permettent de traiter l'application comme un seul arbre React avec un état partagé, même si ses parties sont rendues dans différentes parties du DOM. +Les portails peuvent vous être utiles si votre racine React n'est qu'une partie d'une page statique ou produite côté serveur qui n'est pas construite avec React. Par exemple, si votre page est construite avec un framework côté serveur comme Rails, vous pouvez créer des zones d'interactivité dans des emplacements statiques telles que des barres latérales. Par rapport à l'utilisation de [plusieurs racines React séparées](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react), les portails vous permettent de traiter l'application comme un seul arbre React avec un état partagé, même si ses parties sont affichées dans différentes parties du DOM. ```html index.html - Mon application + Mon appli -

Bienvenue dans mon application hybride

+

Bienvenue dans mon appli hybride

Ceci est un balisage serveur n'appartenant pas à React. @@ -343,7 +343,7 @@ p { ### Afficher des composants React dans des nœuds DOM n'appartenant pas à React {/*rendering-react-components-into-non-react-dom-nodes*/} -Vous pouvez aussi utiliser un portal pour gérer le contenu d'un nœud DOM qui est géré en dehors de React. Par exemple, supposons que vous intégrez un widget de carte n'appartenant pas à React et que vous souhaitez afficher du contenu React dans une popup. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : +Vous pouvez aussi utiliser un portal pour gérer le contenu d'un nœud DOM géré en-dehors de React. Par exemple, supposons que vous intégriez un widget de carte réalisé sans React et que vous souhaitiez afficher du contenu React dans une *popup*. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : ```js const [popupContainer, setPopupContainer] = useState(null); @@ -368,14 +368,14 @@ useEffect(() => { return (
{popupContainer !== null && createPortal( -

Bonjour de React !

, +

Bonjour depuis React !

, popupContainer )}
); ``` -Voici un exemple complet avec lequel vous pouvez vous amuser : +Voici un exemple complet avec lequel vous pouvez jouer : @@ -419,7 +419,7 @@ export default function Map() { return (
{popupContainer !== null && createPortal( -

Bonjour de React !

, +

Bonjour depuis React !

, popupContainer )}
From d4ad4cb287bc78a334c14b30d739140eaf9b2f6a Mon Sep 17 00:00:00 2001 From: Nina Alin <56309556+nina-alin@users.noreply.github.com> Date: Tue, 29 Aug 2023 08:55:35 +0000 Subject: [PATCH 4/5] fix: replace "portal(s)" by "portail(s)" --- .../reference/react-dom/createPortal.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 2446b1b39..f51394f03 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -41,13 +41,13 @@ import { createPortal } from 'react-dom'; [Voir plus d'exemples ci-dessous](#usage). -Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autres aspects, le JSX que vous placez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre React. +Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autres aspects, le JSX que vous placez dans un portail agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre React. #### Paramètres {/*parameters*/} * `children` : quelque chose qui peut être affiché avec React, comme un morceau de JSX (par exemple `
` ou ``), un [Fragment](/reference/react/Fragment) (`<>...`), une chaîne de caractères ou un nombre, ou un tableau de tout ça. -* `domNode`: un nœud DOM, comme ceux retournés par `document.getElementById()`. Le nœud doit déjà exister. Passer un nœud DOM différent lors d'une mise à jour entraînera la recréation du contenu du portal. +* `domNode`: un nœud DOM, comme ceux retournés par `document.getElementById()`. Le nœud doit déjà exister. Passer un nœud DOM différent lors d'une mise à jour entraînera la recréation du contenu du portail. * `key` **optionnelle** : une chaîne de caractères ou un nombre, unique, à utiliser comme [clé](/learn/rendering-lists/#keeping-list-items-in-order-with-key) du portail. @@ -67,7 +67,7 @@ Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autr Les *portails* permettent à vos composants d'afficher certains de leurs enfants dans un endroit différent du DOM. Ça permet à une partie de votre composant de « s'échapper » de tous les conteneurs dans lesquels elle peut se trouver. Par exemple, un composant peut afficher une boîte de dialogue modale ou une infobulle qui apparaît au-dessus et en-dehors du reste de la page. -Pour créer un portal, affichez le résultat de `createPortal` avec du JSX et le nœud DOM où il doit aller : +Pour créer un portail, affichez le résultat de `createPortal` avec du JSX et le nœud DOM où il doit aller : ```js [[1, 8, "

Cet enfant est placé dans le corps du document.

"], [2, 9, "document.body"]] import { createPortal } from 'react-dom'; @@ -87,7 +87,7 @@ function MyComponent() { React placera les nœuds DOM pour le JSX que vous avez passé à l'intérieur du nœud DOM que vous avez fourni. -Sans portal, le second `

` serait placé à l'intérieur de la `

` parente, mais le portal l'a "téléporté" dans le [`document.body`](https://developer.mozilla.org/fr/docs/Web/API/Document/body) : +Sans portail, le second `

` serait placé à l'intérieur de la `

` parente, mais le portail l'a "téléporté" dans le [`document.body`](https://developer.mozilla.org/fr/docs/Web/API/Document/body) : @@ -124,13 +124,13 @@ Observez comment le second paragraphe apparaît visuellement en-dehors de la ` ``` -Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autres aspects, le JSX que vous placez dans un portal agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre React. +Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autres aspects, le JSX que vous placez dans un portail agit comme un nœud enfant du composant React qui l'affiche. Par exemple, l'enfant peut accéder au contexte fourni par l'arbre parent, et les événements remontent des enfants vers les parents selon l'arbre React. --- ### Afficher une boîte de dialogue modale avec un portail {/*rendering-a-modal-dialog-with-a-portal*/} -Vous pouvez utiliser un portal pour créer une boîte de dialogue modale qui flotte au-dessus du reste de la page, même si le composant qui appelle la boîte de dialogue est à l'intérieur d'un conteneur avec `overflow: hidden` ou d'autres styles qui interfèrent avec la boîte de dialogue. +Vous pouvez utiliser un portail pour créer une boîte de dialogue modale qui flotte au-dessus du reste de la page, même si le composant qui appelle la boîte de dialogue est à l'intérieur d'un conteneur avec `overflow: hidden` ou d'autres styles qui interfèrent avec la boîte de dialogue. Dans cet exemple, les deux conteneurs ont des styles qui perturbent la boîte de dialogue modale, mais celui qui est affiché *via* un portail n'est pas affecté car, dans le DOM, la boîte de dialogue modale n'est pas contenue dans les éléments JSX parents. @@ -163,7 +163,7 @@ export default function NoPortalExample() { return ( <> {showModal && ( setShowModal(false)} /> @@ -183,7 +183,7 @@ export default function PortalExample() { return ( <> {showModal && createPortal( setShowModal(false)} />, @@ -237,7 +237,7 @@ export default function ModalContent({ onClose }) { -Il est important de s'assurer que votre application est accessible lors de l'utilisation de portals. Par exemple, vous devrez peut-être gérer le focus du clavier afin que l'utilisateur puisse déplacer le focus dans et hors du portal de manière naturelle. +Il est important de s'assurer que votre application est accessible lors de l'utilisation de portails. Par exemple, vous devrez peut-être gérer le focus du clavier afin que l'utilisateur puisse déplacer le focus dans et hors du portail de manière naturelle. Suivez les [bonnes pratiques WAI-ARIA de création de modales](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) lors de la création de modales. Si vous utilisez un module communautaire, assurez-vous qu'il est accessible et qu'il suit ces directives. @@ -343,7 +343,7 @@ p { ### Afficher des composants React dans des nœuds DOM n'appartenant pas à React {/*rendering-react-components-into-non-react-dom-nodes*/} -Vous pouvez aussi utiliser un portal pour gérer le contenu d'un nœud DOM géré en-dehors de React. Par exemple, supposons que vous intégriez un widget de carte réalisé sans React et que vous souhaitiez afficher du contenu React dans une *popup*. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : +Vous pouvez aussi utiliser un portail pour gérer le contenu d'un nœud DOM géré en-dehors de React. Par exemple, supposons que vous intégriez un widget de carte réalisé sans React et que vous souhaitiez afficher du contenu React dans une *popup*. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : ```js const [popupContainer, setPopupContainer] = useState(null); From df93073a0143bcd02c1a7ac46aab0e20ca648a37 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Tue, 29 Aug 2023 11:10:49 +0200 Subject: [PATCH 5/5] copy(createPortal): final review pass --- TRANSLATORS.md | 1 + .../reference/react-dom/createPortal.md | 20 +++++++++---------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/TRANSLATORS.md b/TRANSLATORS.md index c8714af2f..93a931ad2 100644 --- a/TRANSLATORS.md +++ b/TRANSLATORS.md @@ -166,6 +166,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
  • useDeferredValue
  • useState
  • <textarea>
    • +
  • createPortal
    • diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index f51394f03..a2f949261 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -23,7 +23,7 @@ title: createPortal ### `createPortal(children, domNode, key?)` {/*createportal*/} -Pour créer un portail, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être affiché : +Pour créer un portail, appelez `createPortal`, en passant du JSX et le nœud DOM où il doit être affiché : ```js import { createPortal } from 'react-dom'; @@ -67,7 +67,7 @@ Un portail ne change que l'emplacement physique du nœud DOM. Pour tous les autr Les *portails* permettent à vos composants d'afficher certains de leurs enfants dans un endroit différent du DOM. Ça permet à une partie de votre composant de « s'échapper » de tous les conteneurs dans lesquels elle peut se trouver. Par exemple, un composant peut afficher une boîte de dialogue modale ou une infobulle qui apparaît au-dessus et en-dehors du reste de la page. -Pour créer un portail, affichez le résultat de `createPortal` avec du JSX et le nœud DOM où il doit aller : +Pour créer un portail, affichez le résultat de `createPortal` avec du JSX et le nœud DOM où il doit aller : ```js [[1, 8, "

    Cet enfant est placé dans le corps du document.

    "], [2, 9, "document.body"]] import { createPortal } from 'react-dom'; @@ -85,9 +85,9 @@ function MyComponent() { } ``` -React placera les nœuds DOM pour le JSX que vous avez passé à l'intérieur du nœud DOM que vous avez fourni. +React placera les nœuds DOM résultant du JSX que vous avez passé à l'intérieur du nœud DOM que vous avez fourni. -Sans portail, le second `

    ` serait placé à l'intérieur de la `

    ` parente, mais le portail l'a "téléporté" dans le [`document.body`](https://developer.mozilla.org/fr/docs/Web/API/Document/body) : +Sans portail, le second `

    ` serait placé à l'intérieur de la `

    ` parente, mais le portail l'a "téléporté" dans le [`document.body`](https://developer.mozilla.org/fr/docs/Web/API/Document/body) : @@ -259,7 +259,7 @@ Les portails peuvent vous être utiles si votre racine React n'est qu'une partie

    Bienvenue dans mon appli hybride

    - Ceci est un balisage serveur n'appartenant pas à React. + Ceci est un balisage serveur n'appartenant pas à React.
    @@ -304,7 +304,7 @@ function MainContent() { } function SidebarContent() { - return

    Cette partie est aussi affichée par React !

    ; + return

    Cette partie est aussi affichée par React !

    ; } ``` @@ -341,15 +341,15 @@ p { --- -### Afficher des composants React dans des nœuds DOM n'appartenant pas à React {/*rendering-react-components-into-non-react-dom-nodes*/} +### Afficher des composants React dans des nœuds DOM qui ne sont pas gérés par React {/*rendering-react-components-into-non-react-dom-nodes*/} -Vous pouvez aussi utiliser un portail pour gérer le contenu d'un nœud DOM géré en-dehors de React. Par exemple, supposons que vous intégriez un widget de carte réalisé sans React et que vous souhaitiez afficher du contenu React dans une *popup*. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : +Vous pouvez aussi utiliser un portail pour gérer le contenu d'un nœud DOM géré en-dehors de React. Par exemple, supposons que vous intégriez un widget de carte réalisé sans React et que vous souhaitiez afficher du contenu React dans une *popup*. Pour ce faire, déclarez une variable d'état `popupContainer` pour stocker le nœud DOM dans lequel vous allez effectuer l'affichage : ```js const [popupContainer, setPopupContainer] = useState(null); ``` -Lorsque vous créez le widget tiers, stockez le nœud DOM renvoyé par le widget afin de pouvoir y afficher du contenu : +Lorsque vous créez le widget tiers, stockez le nœud DOM renvoyé par le widget afin de pouvoir y afficher du contenu par la suite : ```js {5-6} useEffect(() => { @@ -362,7 +362,7 @@ useEffect(() => { }, []); ``` -Ça vous permet d'utiliser `createPortal` pour afficher du contenu React dans `popupContainer` une fois qu'il est disponible : +Ça vous permet d'utiliser `createPortal` pour afficher du contenu React dans `popupContainer` une fois qu'il est disponible : ```js {3-6} return (