Skip to content

Commit 7eb93fb

Browse files
committed
feat(passing-data-deeply): final review pass
1 parent eb52362 commit 7eb93fb

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

src/content/learn/passing-data-deeply-with-context.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -695,7 +695,7 @@ export const LevelContext = createContext(0);
695695
696696
</Sandpack>
697697
698-
Désormais, `Heading` et `Section` lisent le `LevelContext` pour déterminer à quelle « profondeur » ils se trouvent. `Section` enrobe ses enfants dans un `LevelContext` pour spécifier que tout son contenu est à un niveau « plus profond ».
698+
Désormais, `Heading` et `Section` lisent le `LevelContext` pour déterminer à quelle « profondeur » ils se trouvent. `Section` enrobe ses enfants dans un `LevelContext` pour spécifier que tout son contenu se situe à un niveau « plus profond ».
699699
700700
<Note>
701701
@@ -705,7 +705,7 @@ Cet exemple utilise des niveaux d'en-têtes parce qu'ils montrent visuellement c
705705
706706
## Le contexte traverse les composants intermédiaires {/*context-passes-through-intermediate-components*/}
707707
708-
Vous pouvez insérer autant de composants que vous voulez entre le composant qui fournit le contexte et celui qui l'utilise. Ça inclut aussi bien les composants natifs comme `<div>` que ceux que vous pourriez créer vous-même.
708+
Vous pouvez insérer autant de composants que vous le souhaitez entre le composant qui fournit le contexte et celui qui l'utilise. Ça inclut aussi bien les composants natifs comme `<div>` que ceux que vous pourriez créer vous-même.
709709
710710
Dans cet exemple, le même composant `Post` (avec une bordure en pointillés) est rendu à deux niveaux d'imbrication différents. Remarquez que le `<Heading>` à l'intérieur obtient automatiquement son niveau depuis la `<Section>` la plus proche :
711711
@@ -842,7 +842,7 @@ En CSS, des propriétés distinctes comme `color` et `background-color` ne sont
842842
843843
## Avant d'utiliser un contexte {/*before-you-use-context*/}
844844
845-
Il est très tentant d'utiliser des contextes ! Toutefois, il est aussi très facile d'en abuser. **Ce n'est pas parce que vous devez propager des props sur plusieurs niveaux que vous devez mettre ces informations dans un contexte**.
845+
Il est souvent très tentant de recourir à des contextes ! Toutefois, il est aussi très facile d'en abuser. **Ce n'est pas parce que vous devez propager des props sur plusieurs niveaux que vous devez mettre ces informations dans un contexte**.
846846
847847
Voici certaines alternatives à considérer avant d'utiliser un contexte :
848848
@@ -963,27 +963,27 @@ export const places = [{
963963
description: 'La tradition de choisir des couleurs vives pour les maisons remonte à la fin du XXe siècle.',
964964
imageId: 'K9HVAGH'
965965
}, {
966-
id: 1,
966+
id: 1,
967967
name: 'Rainbow Village à Taichung, Taiwan',
968968
description: "Pour sauver les maisons de la démolition, Huang Yung-Fu, un résident de la région, a peint l'ensemble des 1 200 maisons en 1924.",
969969
imageId: '9EAYZrt'
970970
}, {
971-
id: 2,
971+
id: 2,
972972
name: 'Macromural de Pachuca, Mexique',
973973
description: "L'une des plus grandes fresques murales du monde recouvre les maisons d'un quartier à flanc de colline.",
974974
imageId: 'DgXHVwu'
975975
}, {
976-
id: 3,
976+
id: 3,
977977
name: 'Selarón Staircase à Rio de Janeiro, Brésil',
978978
description: "Ce monument a été créé par Jorge Selarón, un artiste d'origine chilienne, en guise d’« hommage au people du Brésil ».",
979979
imageId: 'aeO3rpI'
980980
}, {
981-
id: 4,
981+
id: 4,
982982
name: 'Burano, Italie',
983983
description: 'Les maisons sont peintes selon un système de couleurs spécifique datant du XVIe siècle.',
984984
imageId: 'kxsph5C'
985985
}, {
986-
id: 5,
986+
id: 5,
987987
name: 'Chefchaouen, Maroc',
988988
description: "Plusieurs théories expliquent pourquoi les maisons sont peintes en bleu, notamment parce que cette couleur repousserait les moustiques ou qu'elle symboliserait le ciel et le paradis.",
989989
imageId: 'rTqKo46'
@@ -1007,9 +1007,9 @@ export function getImageUrl(place) {
10071007
10081008
```css
10091009
ul { list-style-type: none; padding: 0px 10px; }
1010-
li {
1011-
margin-bottom: 10px;
1012-
display: grid;
1010+
li {
1011+
margin-bottom: 10px;
1012+
display: grid;
10131013
grid-template-columns: auto 1fr;
10141014
gap: 20px;
10151015
align-items: center;
@@ -1102,27 +1102,27 @@ export const places = [{
11021102
description: 'La tradition de choisir des couleurs vives pour les maisons remonte à la fin du XXe siècle.',
11031103
imageId: 'K9HVAGH'
11041104
}, {
1105-
id: 1,
1105+
id: 1,
11061106
name: 'Rainbow Village à Taichung, Taiwan',
11071107
description: "Pour sauver les maisons de la démolition, Huang Yung-Fu, un résident de la région, a peint l'ensemble des 1 200 maisons en 1924.",
11081108
imageId: '9EAYZrt'
11091109
}, {
1110-
id: 2,
1110+
id: 2,
11111111
name: 'Macromural de Pachuca, Mexique',
11121112
description: "L'une des plus grandes fresques murales du monde recouvre les maisons d'un quartier à flanc de colline.",
11131113
imageId: 'DgXHVwu'
11141114
}, {
1115-
id: 3,
1115+
id: 3,
11161116
name: 'Selarón Staircase à Rio de Janeiro, Brésil',
11171117
description: "Ce monument a été créé par Jorge Selarón, un artiste d'origine chilienne, en guise d’« hommage au people du Brésil ».",
11181118
imageId: 'aeO3rpI'
11191119
}, {
1120-
id: 4,
1120+
id: 4,
11211121
name: 'Burano, Italie',
11221122
description: 'Les maisons sont peintes selon un système de couleurs spécifique datant du XVIe siècle.',
11231123
imageId: 'kxsph5C'
11241124
}, {
1125-
id: 5,
1125+
id: 5,
11261126
name: 'Chefchaouen, Maroc',
11271127
description: "Plusieurs théories expliquent pourquoi les maisons sont peintes en bleu, notamment parce que cette couleur repousserait les moustiques ou qu'elle symboliserait le ciel et le paradis.",
11281128
imageId: 'rTqKo46'
@@ -1146,9 +1146,9 @@ export function getImageUrl(place) {
11461146
11471147
```css
11481148
ul { list-style-type: none; padding: 0px 10px; }
1149-
li {
1150-
margin-bottom: 10px;
1151-
display: grid;
1149+
li {
1150+
margin-bottom: 10px;
1151+
display: grid;
11521152
grid-template-columns: auto 1fr;
11531153
gap: 20px;
11541154
align-items: center;

0 commit comments

Comments
 (0)