Browse Source

Removed context-before example

main
Brian Vaughn 7 years ago
parent
commit
c08533af9f
  1. 7
      content/blog/2018-02-07-react-v-16-3.md
  2. 42
      examples/16-3-release-blog-post/context-example-before.js
  3. 12
      examples/16-3-release-blog-post/context-example.js

7
content/blog/2018-02-07-react-v-16-3.md

@ -21,11 +21,8 @@ Version 16.3 introduces a new context API that is more efficient and supports bo
>
> The old context API will keep working for all React 16.x releases, so you will have time to migrate.
Here is an example of how you might inject a "theme" using the old context API:
`embed:16-3-release-blog-post/context-example-before.js`
And here is an example of how you might do the same with the new context API:
`embed:16-3-release-blog-post/context-example-after.js`
Here is an example of how you might inject a "theme" using the new context API:
`embed:16-3-release-blog-post/context-example.js`
[Learn more about the new context API here.](#)

42
examples/16-3-release-blog-post/context-example-before.js

@ -1,42 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
class ThemeProvider extends React.Component {
// highlight-range{1-3}
static childContextTypes = {
theme: PropTypes.string,
};
state = {
theme: 'light',
};
// highlight-range{1-5}
getChildContext() {
return {
theme: state.theme,
};
}
render() {
return this.props.children;
}
}
class ThemedButton extends React.Component {
// highlight-range{1-3}
static contextTypes = {
theme: PropTypes.string,
};
render() {
// highlight-next-line
const background = this.context.theme ? '#fff' : '#000';
return (
<button style={{background}}>
{this.props.children}
</button>
);
}
}

12
examples/16-3-release-blog-post/context-example-after.js → examples/16-3-release-blog-post/context-example.js

@ -5,7 +5,7 @@ class ThemeProvider extends React.Component {
state = {theme: 'light'};
render() {
// highlight-range{2}
// highlight-range{2-4}
return (
<ThemeContext.Provider value={this.state.theme}>
{this.props.children}
@ -19,15 +19,7 @@ class ThemedButton extends React.Component {
// highlight-range{2-4}
return (
<ThemeContext.Consumer>
{theme => {
const background = theme ? '#fff' : '#000';
return (
<button style={{background}}>
{this.props.children}
</button>
);
}}
{theme => <Button theme={theme} />}
</ThemeContext.Consumer>
);
}
Loading…
Cancel
Save