File tree Expand file tree Collapse file tree 3 files changed +46
-0
lines changed Expand file tree Collapse file tree 3 files changed +46
-0
lines changed Original file line number Diff line number Diff line change @@ -845,6 +845,30 @@ export default function ToggleThemeButton(props: Props) {
845
845
846
846
` ` `
847
847
848
+ #### ThemeConsumer in class component
849
+
850
+ ` ` ` tsx
851
+ import * as React from ' react' ;
852
+ import ThemeContext from ' ./theme-context' ;
853
+
854
+ type Props = {};
855
+
856
+ export class ToggleThemeButtonClass extends React .Component <Props > {
857
+ static contextType = ThemeContext ;
858
+ context! : React .ContextType <typeof ThemeContext >;
859
+
860
+ render() {
861
+ const { theme, toggleTheme } = this .context ;
862
+ return (
863
+ <button style = { theme } onClick = { toggleTheme } >
864
+ Toggle Theme
865
+ </button >
866
+ );
867
+ }
868
+ }
869
+
870
+ ` ` `
871
+
848
872
[Implementation with Hooks](#--usecontext)
849
873
850
874
[⇧ back to top](#table-of-contents)
Original file line number Diff line number Diff line change @@ -319,6 +319,10 @@ const mapDispatchToProps = (dispatch: Dispatch<ActionType>) => ({
319
319
320
320
::codeblock='playground/src/context/theme-consumer.tsx'::
321
321
322
+ #### ThemeConsumer in class component
323
+
324
+ ::codeblock='playground/src/context/theme-consumer-class.tsx'::
325
+
322
326
[Implementation with Hooks](#--usecontext)
323
327
324
328
[⇧ back to top](#table-of-contents)
Original file line number Diff line number Diff line change
1
+ import * as React from 'react' ;
2
+ import ThemeContext from './theme-context' ;
3
+
4
+ type Props = { } ;
5
+
6
+ export class ToggleThemeButtonClass extends React . Component < Props > {
7
+ static contextType = ThemeContext ;
8
+ context ! : React . ContextType < typeof ThemeContext > ;
9
+
10
+ render ( ) {
11
+ const { theme, toggleTheme } = this . context ;
12
+ return (
13
+ < button style = { theme } onClick = { toggleTheme } >
14
+ Toggle Theme
15
+ </ button >
16
+ ) ;
17
+ }
18
+ }
You can’t perform that action at this time.
0 commit comments