Context docs updated with ES6 examples (#6852)
Alex Zherdev committed
May 24, 2016 at 21:27 UTC
6a101b6c10ac279f9765d6dcf4865890012bc1af
1 file changed
+67
-61
docs/docs/12-context.md
+67
-61
@@ -24,82 +24,85 @@ Occasionally, you want to pass data through the component tree without having to
24
Suppose you have a structure like:
25
26
```javascript
27
-var Button = React.createClass({
28
- render: function() {
27
+class Button extends React.Component {
28
+ render() {
29
return (
30
<button style={{'{{'}}background: this.props.color}}>
31
{this.props.children}
32
</button>
33
);
34
}
35
-});
35
+}
36
37
-var Message = React.createClass({
38
- render: function() {
37
+class Message extends React.Component {
38
+ render() {
39
return (
40
<div>
41
{this.props.text} <Button color={this.props.color}>Delete</Button>
42
</div>
43
);
44
}
45
-});
46
-
47
-var MessageList = React.createClass({
48
- render: function() {
49
- var color = "purple";
50
- var children = this.props.messages.map(function(message) {
51
- return <Message text={message.text} color={color} />;
52
- });
53
- return <div>{children}</div>;
45
+}
46
+
47
+class MessageList extends React.Component {
48
+ render() {
49
+ const color = "purple";
50
+ const children = this.props.messages.map((message) =>
51
+ <Message text={message.text} color={color} />
52
+ );
53
+ return <div>{this.props.children}</div>;
54
}
55
-});
55
+}
56
```
57
58
In this example, we manually thread through a `color` prop in order to style the `Button` and `Message` components appropriately. Theming is a good example of when you might want an entire subtree to have access to some piece of information (a color). Using context, we can pass this through the tree automatically:
59
60
-```javascript{2-4,7,18,25-30,33}
61
-var Button = React.createClass({
62
- contextTypes: {
63
- color: React.PropTypes.string
64
- },
65
- render: function() {
60
+```javascript{4,11-13,19,26-28,38-40}
61
+class Button extends React.Component {
62
+ render() {
63
return (
64
<button style={{'{{'}}background: this.context.color}}>
65
{this.props.children}
66
</button>
67
);
68
}
72
-});
69
+}
70
+
71
+Button.contextTypes = {
72
+ color: React.PropTypes.string
73
+};
74
74
-var Message = React.createClass({
75
- render: function() {
75
+class Message extends React.Component {
76
+ render() {
77
return (
78
<div>
79
{this.props.text} <Button>Delete</Button>
80
</div>
81
);
82
}
82
-});
83
+}
84
84
-var MessageList = React.createClass({
85
- childContextTypes: {
86
- color: React.PropTypes.string
87
- },
88
- getChildContext: function() {
85
+class MessageList extends React.Component {
86
+ getChildContext() {
87
return {color: "purple"};
90
- },
91
- render: function() {
92
- var children = this.props.messages.map(function(message) {
93
- return <Message text={message.text} />;
94
- });
88
+ }
89
+
90
+ render() {
91
+ const children = this.props.messages.map((message) =>
92
+ <Message text={message.text} />
93
+ );
94
return <div>{children}</div>;
95
}
97
-});
96
+}
97
+
98
+MessageList.childContextTypes = {
99
+ color: React.PropTypes.string
100
+};
101
```
102
103
By adding `childContextTypes` and `getChildContext` to `MessageList` (the context provider), React passes the information down automatically and any component in the subtree (in this case, `Button`) can access it by defining `contextTypes`.
104
102
-If `contextTypes` is not defined, then `this.context` will be an empty object.
105
+If `contextTypes` is not defined, then `context` will be an empty object.
106
107
## Parent-child coupling
108
@@ -150,13 +153,11 @@ void componentDidUpdate(
153
Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows the `Button` component above written as a stateless functional component.
154
155
```javascript
153
-function Button(props, context) {
154
- return (
155
- <button style={{'{{'}}background: context.color}}>
156
- {props.children}
157
- </button>
158
- );
159
-}
156
+const Button = ({children}, context) =>
157
+ <button style={{'{{'}}background: context.color}}>
158
+ {children}
159
+ </button>;
160
+
161
Button.contextTypes = {color: React.PropTypes.string};
162
```
163
@@ -165,31 +166,36 @@ Button.contextTypes = {color: React.PropTypes.string};
166
The `getChildContext` function will be called when the state or props changes. In order to update data in the context, trigger a local state update with `this.setState`. This will trigger a new context and changes will be received by the children.
167
168
```javascript
168
-var MediaQuery = React.createClass({
169
- getInitialState: function(){
170
- return {type:'desktop'};
171
- },
172
- childContextTypes: {
173
- type: React.PropTypes.string
174
- },
175
- getChildContext: function() {
169
+class MediaQuery extends React.Component {
170
+ constructor(props) {
171
+ super(props);
172
+ this.state = {type:'desktop'};
173
+ }
174
+
175
+ getChildContext() {
176
return {type: this.state.type};
177
- },
178
- componentDidMount: function(){
179
- var checkMediaQuery = function(){
180
- var type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
181
- if (type !== this.state.type){
182
- this.setState({type:type});
177
+ }
178
+
179
+ componentDidMount() {
180
+ const checkMediaQuery = () => {
181
+ const type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
182
+ if (type !== this.state.type) {
183
+ this.setState({type});
184
}
185
};
186
187
window.addEventListener('resize', checkMediaQuery);
188
checkMediaQuery();
188
- },
189
- render: function(){
189
+ }
190
+
191
+ render() {
192
return this.props.children;
193
}
192
-});
194
+}
195
+
196
+MediaQuery.childContextTypes = {
197
+ type: React.PropTypes.string
198
+};
199
```
200
201
## When not to use context