docs tips small refactorings
Cheng Lou committed
Dec 30, 2013 at 17:54 UTC
1671efb53a542cfb482448d2505567860666fcb5
5 files changed
+14
-22
docs/tips/07-children-props-type.md
+2
@@ -16,6 +16,7 @@ var GenericWrapper = React.createClass({
16
componentDidMount: function() {
17
console.log(Array.isArray(this.props.children)); // => true
18
},
19
+
20
render: function() {
21
return <div />;
22
}
@@ -40,6 +41,7 @@ var GenericWrapper = React.createClass({
41
// length of the non-existant array wrapper!
42
console.log(this.props.children.length);
43
},
44
+
45
render: function() {
46
return <div />;
47
}
docs/tips/10-props-in-getInitialState-as-anti-pattern.md
+6
-18
@@ -22,6 +22,7 @@ var MessageBox = React.createClass({
22
getInitialState: function() {
23
return {nameWithQualifier: "Mr. " + this.props.name};
24
},
25
+
26
render: function() {
27
return <div>{this.state.nameWithQualifier}</div>;
28
}
@@ -44,24 +45,9 @@ var MessageBox = React.createClass({
45
React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
46
```
47
47
-For more complex logic:
48
+(For more complex logic, simply isolate the computation in a method.)
49
49
-```js
50
-/** @jsx React.DOM */
51
-
52
-var MessageBox = React.createClass({
53
- render: function() {
54
- return <div>{this.getNameWithQualifier(this.props.name)}</div>;
55
- },
56
- getNameWithQualifier: function(name) {
57
- return 'Mr. ' + name;
58
- }
59
-});
60
-
61
-React.renderComponent(<MessageBox name="Rogers"/>, mountNode);
62
-```
63
-
64
-However, it's **not** an anti-pattern if you intentionally make it clear that synchronization's not the goal here:
50
+However, it's **not** an anti-pattern if you make it clear that synchronization's not the goal here:
51
52
```js
53
/** @jsx React.DOM */
@@ -69,12 +55,14 @@ However, it's **not** an anti-pattern if you intentionally make it clear that sy
55
var Counter = React.createClass({
56
getInitialState: function() {
57
// naming it initialX clearly indicates that the only purpose
72
- // of the passed down prop is to initialize something internal
58
+ // of the passed down prop is to initialize something internally
59
return {count: this.props.initialCount};
60
},
61
+
62
handleClick: function() {
63
this.setState({count: this.state.count + 1});
64
},
65
+
66
render: function() {
67
return <div onClick={this.handleClick}>{this.state.count}</div>;
68
}
docs/tips/12-initial-ajax.md
+2
@@ -21,6 +21,7 @@ var UserGist = React.createClass({
21
lastGistUrl: ''
22
};
23
},
24
+
25
componentDidMount: function() {
26
$.get(this.props.source, function(result) {
27
var lastGist = result[0];
@@ -30,6 +31,7 @@ var UserGist = React.createClass({
31
});
32
}.bind(this));
33
},
34
+
35
render: function() {
36
return (
37
<div>
docs/tips/14-communicate-between-components.md
+1
-1
@@ -40,4 +40,4 @@ React.renderComponent(
40
41
Notice the use of `bind(this, arg1, arg2, ...)`: we're simply passing more arguments to `handleClick`. This is not a new React concept; it's just JavaScript.
42
43
-For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and when you receive an event call `setState()`.
43
+For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and when you receive an event, call `setState()`.
docs/tips/15-expose-component-functions.md
renamed
+3
-3
@@ -17,7 +17,7 @@ var Todo = React.createClass({
17
render: function() {
18
return <div onClick={this.props.onClick}>{this.props.title}</div>;
19
},
20
-
20
+
21
//this component will be accessed by the parent through the `ref` attribute
22
animate: function() {
23
console.log('Pretend %s is animating', this.props.title);
@@ -28,7 +28,7 @@ var Todos = React.createClass({
28
getInitialState: function() {
29
return {items: ['Apple', 'Banana', 'Cranberry']};
30
},
31
-
31
+
32
handleClick: function(i) {
33
var items = this.state.items;
34
items.splice(i, 1);
@@ -38,7 +38,7 @@ var Todos = React.createClass({
38
}
39
}.bind(this));
40
},
41
-
41
+
42
render: function() {
43
return (
44
<div>