Skip to content

Commit

Permalink
Final tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@tdd
tdd authored Mar 28, 2019
1 parent 64b4123 commit ed9b3cf
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions content/docs/portals.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ Le premier argument (`child`) peut être n'importe quel [enfant affichable par R

## Utilisation {#usage}

D’habitude, lorsque vous renvoyez un élément depuis le rendu d'un composant, cet élément est monté dans le DOM en tant qu'enfant du plus proche parent :
D’habitude, lorsque vous renvoyez un élément depuis le rendu d'un composant, cet élément est monté dans le DOM en tant qu'enfant du plus proche parent :

```js{4,6}
render() {
// React monte une nouvelle div et affiche les enfants à l'intérieur de celle-ci
// React monte une nouvelle div et affiche les enfants à l’intérieur de celle-ci
return (
<div>
{this.props.children}
Expand All @@ -32,29 +32,29 @@ Cependant il est parfois utile d'insérer un enfant à un autre emplacement du D
```js{6}
render() {
// React *ne crée pas* une nouvelle div, mais affiche les enfants dans `domNode`.
// `domNode` peut être n'importe quel élément valide du DOM, peu importe sa position.
// `domNode` peut être n’importe quel élément valide du DOM, peu importe sa position.
return ReactDOM.createPortal(
this.props.children,
domNode
);
}
```

Un cas typique d'utilisation des portails survient lorsqu'un composant parent possède un style `overflow: hidden` ou `z-index` et que l'enfant a besoin de « sortir de son conteneur » visuellement. C’est par exemple le cas des boîtes de dialogues, des pop-ups ou encore des infobulles.
Un cas typique d'utilisation des portails survient lorsqu'un composant parent possède un style `overflow: hidden` ou `z-index` et que l'enfant a besoin de « sortir de son conteneur » visuellement. C’est par exemple le cas des boîtes de dialogues, des pop-ups ou encore des infobulles.

> Remarque
>
> Lorsque vous travaillez avec les portails, gardez en tête que la [gestion du focus du clavier](/docs/accessibility.html#programmatically-managing-focus) devient très importante.
>
> Pour les fenêtres modales, assurez-vous que tout le monde puisse interagir avec celle-ci en suivant les règles [WAI-ARIA Modal Authoring Practices du W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) (en anglais).
> Pour les fenêtres modales, assurez-vous que tout le monde puisse interagir avec celles-ci en suivant les règles [WAI-ARIA Modal Authoring Practices du W3C](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) (en anglais).
[**Essayer dans CodePen**](https://codepen.io/gaearon/pen/yzMaBd)

## La propagation des événements dans les portails {#event-bubbling-through-portals}

Même si un portail peut être placé n'importe où dans l'arborescence DOM, il se comporte comme un enfant React normal à tous les autres points de vue. Les fonctionnalités comme le contexte se comportent exactement de la même façon, indépendamment du fait que l'enfant soit un portail, car le portail existe toujours dans *l'arborescence React*, indépendamment de sa position dans *l'arborescence DOM*.

Ça concerne aussi la propagation montante des événements. Un événement déclenché à l'intérieur d'un portail sera propagé aux ancêtres dans *l'arborescence React*, même si ces éléments ne sont pas ses ancêtres dans *l'arborescence DOM*. Prenons le code HTML suivant :
Ça concerne aussi la propagation montante des événements. Un événement déclenché à l'intérieur d'un portail sera propagé aux ancêtres dans *l'arborescence React*, même si ces éléments ne sont pas ses ancêtres dans *l'arborescence DOM*. Prenons par exemple le code HTML suivant :

```html
<html>
Expand All @@ -67,7 +67,7 @@ Même si un portail peut être placé n'importe où dans l'arborescence DOM, il

Un composant `Parent` dans `#app-root` pourrait attraper un événement montant non-intercepté provenant du nœud frère `#modal-root`.

```js{28-31,42-49,53,61-63,70-71,74}
```js{28-31,42-49,53,60-62,69-70,73}
// Ces deux conteneurs sont frères dans le DOM
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');
Expand All @@ -79,14 +79,14 @@ class Modal extends React.Component {
}
componentDidMount() {
// L'élément portail est inséré dans l'arborescence DOM une fois
// L’élément portail est inséré dans l’arborescence DOM une fois
// que les enfants du Modal sont montés, ce qui signifie que
// les enfants seront montés sur un nœud DOM détaché.
// Si un composant enfant nécessite d'être attaché au DOM
// dès le montage,
// par exemple pour mesurer un nœud DOM ou utiliser 'autoFocus'
// dans un nœud descendant, ajoutez un état à la modale et affichez
// uniquement les enfants une fois la modale insérée dans le DOM.
// Si un composant enfant nécessite d’être attaché au DOM
// dès le montage, par exemple pour mesurer un nœud DOM ou
// utiliser 'autoFocus' dans un nœud descendant, ajoutez un état
// à la modale et affichez uniquement les enfants une fois la
// modale insérée dans le DOM.
modalRoot.appendChild(this.el);
}
Expand All @@ -110,9 +110,9 @@ class Parent extends React.Component {
}
handleClick() {
// La fonction se déclenchera lorsque le bouton dans l'enfant sera cliqué,
// permettant la mise à jour de l'état du parent, même si le bouton
// n'en est pas un descendant direct dans le DOM.
// La fonction se déclenchera lorsque le bouton dans l’enfant sera cliqué,
// permettant la mise à jour de l’état du parent, même si le bouton
// n’en est pas un descendant direct dans le DOM.
this.setState(state => ({
clicks: state.clicks + 1
}));
Expand All @@ -121,10 +121,10 @@ class Parent extends React.Component {
render() {
return (
<div onClick={this.handleClick}>
<p>Nombre de clics : {this.state.clicks}</p>
<p>Nombre de clics : {this.state.clicks}</p>
<p>
Ouvrez les outils de développement de votre navigateur
pour observer que ce bouton n'est pas un enfant de la div
pour observer que ce bouton n’est pas un enfant de la div
qui écoute les événements de clic.
</p>
<Modal>
Expand All @@ -136,8 +136,8 @@ class Parent extends React.Component {
}
function Child() {
// Lors de clics sur ce bouton, l'événement sera propagé au parent
// car il n'y a pas d'attribut 'onClick' défini ici.
// Lors de clics sur ce bouton, l’événement sera propagé au parent
// car il n’y a pas d'attribut 'onClick' défini ici.
return (
<div className="modal">
<button>Cliquez ici</button>
Expand Down

0 comments on commit ed9b3cf

Please sign in to comment.