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
Copy file name to clipboardExpand all lines: content/blog/2017-09-08-dom-attributes-in-react-16.md
+48-48
Original file line number
Diff line number
Diff line change
@@ -1,38 +1,38 @@
1
1
---
2
-
title: "Les attributs du DOM dans React 16"
2
+
title: "Les attributs DOM dans React 16"
3
3
author: [gaearon]
4
4
---
5
5
6
-
Dans le passé, React ignorait les attributs DOM inconnus. Si vous écriviez du JSX avec un attribut que React ne reconnaissait pas, React le sautait tout simplement. Par exemple, ceci:
6
+
Par le passé, React ignorait les attributs DOM inconnus. Si vous écriviez du JSX avec un attribut que React ne reconnaissait pas, React le sautait tout simplement. Par exemple, le code suivant :
7
7
8
8
```js
9
-
// Votre code:
9
+
// Votre code:
10
10
<div mycustomattribute="quelque chose"/>
11
11
```
12
12
13
-
rendrait une div vide dans le DOM avec React 15:
13
+
produirait une div vide dans le DOM avec React 15:
14
14
15
15
```js
16
-
// rendu de React 15:
16
+
// rendu de React 15:
17
17
<div />
18
18
```
19
19
20
-
Dans React 16, nous apportons un changement. Maintenant, tous les attributs inconnus se retrouveront dans le DOM:
20
+
Avec React 16, nous apportons un changement. Désormais, tous les attributs inconnus se retrouveront dans le DOM:
## Pourquoi changer ça ? {#why-are-we-changing-this}
28
28
29
-
React a toujours fourni une API Javascript centrée sur le DOM. Étant donné que les composants React prennent souvent à la fois des propriétés personnalisées et relative au DOM, il est logique que React utilise la convention `camelCase` tout comme les API DOM:
29
+
React a toujours fourni une API pour le DOM centrée sur Javascript. Étant donné que les composants React acceptent souvent à la fois des propriétés personnalisées et d’autres liées au DOM, il est logique que React utilise la convention `camelCase` tout comme les API DOM:
30
30
31
31
```js
32
32
<div tabIndex="-1"/>
33
33
```
34
34
35
-
Cela n'a pas changé. Cependant, la façon dont nous l'avons appliqué dans le passé nous a obligés à maintenir une liste blanche de tous les attributs DOM React valides dans le paquet:
35
+
Cet aspect n'a pas changé. Cependant, la façon dont nous l'avons géré par le passé nous a obligés à maintenir une liste blanche de tous les attributs DOM React valides dans le paquet:
36
36
37
37
```js
38
38
// ...
@@ -43,129 +43,129 @@ title: 'title',
43
43
// ...
44
44
```
45
45
46
-
Cela avait deux inconvénients:
46
+
Cette approche présentait deux inconvénients:
47
47
48
-
* Vous ne pouviez pas [passer un attribut personnalisé](https://github.com/facebook/react/issues/140). Cela est utile pour fournir des attributs non standard spécifiques au navigateur, essayer de nouvelles API DOM et s'intégrer à des bibliothèques tierces avisées.
48
+
* Vous ne pouviez pas [passer un attribut personnalisé](https://github.com/facebook/react/issues/140). C’est pourtant utile pour fournir des attributs non standard spécifiques au navigateur, essayer de nouvelles API DOM et s'intégrer avec des bibliothèques tierces imposant certaines contraintes.
49
49
50
-
* La liste d'attributs n'a cessé de croître au fil du temps, mais la plupart des noms d'attributs canoniques React sont déjà valides dans le DOM. La suppression de la majorité de liste blanche nous a aidé à diminuer un peu la taille du paquet.
50
+
* La liste d'attributs n'a cessé de croître au fil du temps, mais la plupart des noms d'attributs canoniques React sont déjà valides dans le DOM. Retirer la majorité de la liste blanche nous a aidés à diminuer un peu la taille du paquet.
51
51
52
52
Avec la nouvelle approche, ces deux problèmes sont résolus. Avec React 16, vous pouvez désormais transmettre des attributs personnalisés à tous les éléments HTML et SVG, et React n'a pas à inclure de liste blanche d'attributs dans sa version de production.
53
53
54
-
** Notez que vous devez toujours utiliser la dénomination canonique React pour les attributs connus: **
54
+
** Notez que vous devez toujours utiliser la nomenclature canonique React pour les attributs connus :**
55
55
56
56
```js
57
57
// Oui, s'il vous plaît
58
58
<div tabIndex="-1"/>
59
59
60
-
// Attention: propriété du DOM invalide `tabindex`. Vous voulez certainement dire `tabIndex`?
60
+
// Attention: propriété du DOM invalide `tabindex`. Vous voulez certainement dire `tabIndex`?
61
61
<div tabindex="-1"/>
62
62
```
63
63
64
64
En d'autres termes, la façon dont vous utilisez les composants du DOM dans React n'a pas changé, mais vous disposez désormais de nouvelles fonctionnalités.
65
65
66
-
## Dois-je conserver les données dans des attributs personnalisés ? {#dois-je-conserver-les-donnees-dans-des-attributs-personnalises}
66
+
## Devrais-je stocker des données dans des attributs personnalisés ? {#should-i-keep-data-in-custom-attributes}
67
67
68
-
Non. Nous ne vous encourageons pas à conserver les données dans les attributs DOM. Même si vous le devez, les attributs `data-`sont probablement une meilleure approche, mais dans la plupart des cas, les données doivent être conservées dans l'état du composant React ou dans des collections externes.
68
+
Non. Nous vous déconseillons de stocker des données dans les attributs DOM. Même si vous en aviez besoin, les attributs `data-`constituent probablement une meilleure approche, mais dans la plupart des cas, les données devraient être conservées dans l'état du composant React ou dans des *stores* externes.
69
69
70
70
Cependant, la nouvelle fonctionnalité est pratique si vous devez utiliser un attribut DOM non standard ou nouveau, ou si vous devez intégrer une bibliothèque tierce qui s'appuie sur de tels attributs.
71
71
72
-
## Attributs Data et ARIA {#Attributs-data-et-aria}
72
+
## Attributs `data-` et ARIA {#data-and-aria-attributes}
73
73
74
-
Comme auparavant, React vous permet de passer librement les attributs `data-` et `aria-`:
74
+
Comme auparavant, React vous permet de passer librement les attributs `data-` et `aria-`:
75
75
76
76
```js
77
77
<div data-foo="42"/>
78
78
<button aria-label="Fermer" onClick={onClose} />
79
79
```
80
80
81
-
Cela n'a pas changé.
81
+
Ce point n'a pas changé.
82
82
83
-
[L'accessibilité](/docs/accessibility.html) est très importante, donc même si React 16 transmet tous les attributs, il valide toujours que les accessoires`aria-`aient des noms corrects en mode développement, tout comme React 15.
83
+
[L'accessibilité](/docs/accessibility.html) est très importante, donc même si React 16 transmet tous les attributs, il vérifie toujours que les *props*`aria-`ont des noms corrects en mode développement, tout comme React 15.
84
84
85
-
## Chemin de migration {#chemin-de-migration}
85
+
## Méthodologie de migration {#migration-path}
86
86
87
87
Nous avons inclus [un avertissement concernant les attributs inconnus](/warnings/unknown-prop.html) depuis [React 15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0) qui est paru il y a plus d'un an. La grande majorité des bibliothèques tierces ont déjà mis à jour leur code. Si votre application ne génère pas d'avertissements avec React 15.2.0 ou une version ultérieure, ce changement ne devrait pas nécessiter de modifications dans votre code.
88
88
89
-
Si vous envoyez accidentellement des propriétés non-DOM aux composants du DOM, avec React 16, vous commencerez à voir ces attributs dans le DOM, comme par exemple:
89
+
Si vous envoyez accidentellement des propriétés non-DOM aux composants du DOM, avec React 16, vous commencerez à voir ces attributs dans le DOM, comme par exemple:
90
90
91
91
```js
92
92
<div myData='[Object object]'/>
93
93
```
94
94
95
-
D'une certaine manière c'est peu risqué (le navigateur les ignorera) mais nous vous recommandons de corriger ces cas lorsque vous les voyez. Un danger potentiel est possible si vous passez un objet qui implémente une méthode personnalisée `toString ()` ou `valueOf ()` qui retourne. Un autre problème possible est que les attributs HTML hérités comme `align` et `valign`seront désormais transmis au DOM. Ils étaient auparavant enlevés parce que React ne les prenait pas en charge.
95
+
En un sens c'est peu risqué (le navigateur les ignorera) mais nous vous conseillons de corriger ces cas lorsque vous les voyez. Un risque potentiel consiste à passer un objet qui implémente une méthode personnalisée `toString ()` ou `valueOf ()` qui lèverait une exception. Un autre problème possible vient du fait que les attributs HTML dépréciés comme `align` et `valign`sont désormais transmis au DOM. Ils étaient auparavant filtrés parce que React ne les prenait pas en charge.
96
96
97
97
Pour éviter ces problèmes, nous vous suggérons de corriger les avertissements que vous voyez dans React 15 avant de passer à React 16.
98
98
99
-
## Changements dans les détails {#changements-dans-les-details}
99
+
## Détail des changements {#changes-in-detail}
100
100
101
-
Nous avons apporté quelques autres modifications pour rendre le comportement plus prévisible et vous aider à vous assurer que vous ne commettez pas d'erreurs. Il n'est pas prévu que ces changements risquent de perturber les applications du monde réel.
101
+
Nous avons apporté quelques autres modifications pour rendre le comportement plus prévisible et vous aider à vous assurer que vous ne commettez pas d'erreurs. Ces changements ne devraient pas perturber les applications en production.
102
102
103
103
**Ces modifications n'affectent que les composants DOM comme `<div>`, pas vos propres composants.**
104
104
105
105
En voici une liste détaillée.
106
106
107
-
***Attributs inconnus avec chaîne, nombre et valeurs d'objet:**
107
+
***Attributs inconnus dont la valeur est une chaîne de caractère, un nombre ou un objet:**
108
108
109
109
```js
110
110
<div mycustomattribute="valeur"/>
111
111
<div mycustomattribute={42} />
112
-
<div mycustomattribute={monObjet} />
112
+
<div mycustomattribute={myObject} />
113
113
```
114
114
115
-
React 15: montre un avertissement et les ignore.
116
-
React 16: convertit les valeurs en chaînes et les transmet.
115
+
React 15: génère un avertissement et les ignore.
116
+
React 16: convertit les valeurs en chaînes de caractères et les transmet.
117
117
118
-
*Remarque: les attributs commençant par `on` ne sont pas transmis comme exception, car cela pourrait devenir une faille de sécurité potentielle.*
118
+
*Remarque: les attributs commençant par `on`constituent une exception et ne sont pas transmis, car ils constituent une faille de sécurité potentielle.*
119
119
120
-
***Attributs connus avec un nom canonique React différent:**
120
+
***Attributs connus avec un nom canonique React différent:**
121
121
122
122
```js
123
123
<div tabindex="-1" />
124
124
<div class="salut" />
125
125
```
126
126
127
-
React 15: montre un avertissement et les ignore.
128
-
React 16: montre un avertissement mais convertit les valeurs en chaînes et les transmet.
127
+
React 15: génère un avertissement et les ignore.
128
+
React 16: génère un avertissement mais convertit les valeurs en chaînes de caractères et les transmet.
129
129
130
-
*Remarque: utilisez toujours la dénomination canonique React pour tous les attributs pris en charge.*
130
+
*Remarque: utilisez toujours la nomenclature canonique de React pour les attributs pris en charge.*
131
131
132
-
***Attributs non booléens avec des valeurs booléennes:**
132
+
***Attributs non booléens avec des valeurs booléennes:**
133
133
134
134
```js
135
135
<div className={false} />
136
136
```
137
137
138
-
React 15: convertit les booléens en chaînes et les fait passer.
139
-
React 16: montre un avertissement et les ignore.
138
+
React 15: convertit les booléens en chaînes de caractères et les transmet.
139
+
React 16: génère un avertissement et les ignore.
140
140
141
-
***Attributs non événementiels avec des fonctions comme valeur:**
141
+
***Attributs non événementiels avec des fonctions comme valeur:**
142
142
143
143
```js
144
144
<div className={function() {}} />
145
145
```
146
146
147
-
React 15: convertit les fonctions en chaînes et les fait passer.
148
-
React 16: montre un avertissement et les ignore.
147
+
React 15: convertit les fonctions en chaînes de caractères et les transmet.
148
+
React 16: génère un avertissement et les ignore.
149
149
150
-
***Attributs avec des valeurs de symbole:**
150
+
***Attributs avec des symboles comme valeur :**
151
151
152
152
```js
153
153
<div className={Symbol('foo')} />
154
154
```
155
155
156
-
React 15: plante.
157
-
React 16: montre un avertissement et les ignore.
156
+
React 15: plante.
157
+
React 16: génère un avertissement et les ignore.
158
158
159
-
***Attributs avec des valeurs `NaN`:**
159
+
***Attributs avec des valeurs `NaN`:**
160
160
161
161
```js
162
162
<div tabIndex={0 / 0} />
163
163
```
164
164
165
-
React 15: convertit les `NaN` en chaînes et les fait passer.
166
-
React 15: convertit les `NaN` en chaînes et les fait passer avec un avertissement.
165
+
React 15: convertit les `NaN` en chaînes de caractères et les transmet.
166
+
React 16: convertit les `NaN` en chaînes de caractères et les transmet mais avec un avertissement.
167
167
168
-
While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
168
+
En testant cette version, nous avons aussi [créé un tableau généré automatiquement](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) pour tous les attributs connus afin de pister d’éventuelles régressions.
0 commit comments