1
1
// highlight-range{1-4}
2
- // Context lets us pass a value deep into the component tree
3
- // without explicitly threading it through every component .
4
- // Create a context for the current theme (with " light" as the default ).
2
+ // Le Contexte nous permet de transmettre une prop profondément dans l’arbre des
3
+ // composants sans la faire passer explicitement à travers tous les composants .
4
+ // Crée un contexte pour le thème (avec “ light” comme valeur par défaut ).
5
5
const ThemeContext = React . createContext ( 'light' ) ;
6
6
7
7
class App extends React . Component {
8
8
render ( ) {
9
9
// highlight-range{1-3,5}
10
- // Use a Provider to pass the current theme to the tree below .
11
- // Any component can read it, no matter how deep it is .
12
- // In this example, we're passing " dark" as the current value .
10
+ // Utilise un Provider pour passer le thème plus bas dans l’arbre .
11
+ // N’importe quel composant peut le lire, quelle que soit sa profondeur .
12
+ // Dans cet exemple, nous passons “ dark” comme valeur actuelle .
13
13
return (
14
14
< ThemeContext . Provider value = "dark" >
15
15
< Toolbar />
@@ -18,9 +18,8 @@ class App extends React.Component {
18
18
}
19
19
}
20
20
21
- // highlight-range{1,2}
22
- // A component in the middle doesn't have to
23
- // pass the theme down explicitly anymore.
21
+ // highlight-range{1,1}
22
+ // Un composant au milieu n’a plus à transmettre explicitement le thème
24
23
function Toolbar ( props ) {
25
24
return (
26
25
< div >
@@ -31,9 +30,9 @@ function Toolbar(props) {
31
30
32
31
class ThemedButton extends React . Component {
33
32
// highlight-range{1-3,6}
34
- // Assign a contextType to read the current theme context.
35
- // React will find the closest theme Provider above and use its value .
36
- // In this example, the current theme is " dark" .
33
+ // Définit un contextType pour lire le contexte de thème actuel. React va
34
+ // trouver le Provider de thème ancêtre le plus proche et utiliser sa valeur .
35
+ // Dans cet exemple, le thème actuel est “ dark” .
37
36
static contextType = ThemeContext ;
38
37
render ( ) {
39
38
return < Button theme = { this . context } /> ;
0 commit comments