Children props tip tweak
Paul O’Shannessy committed
Nov 12, 2013 at 12:59 UTC
75383c5c9973215bc834da2045518b7956247a77
1 file changed
+7
-5
docs/tips/07-children-props-type.md
+7
-5
@@ -7,7 +7,7 @@ prev: style-props-value-px.html
7
next: controlled-input-null-value.html
8
---
9
10
-Usually, a component's `this.props.children` is an array of components:
10
+Usually, a component's children (`this.props.children`) is an array of components:
11
12
```js
13
/** @jsx React.DOM */
@@ -22,21 +22,23 @@ var GenericWrapper = React.createClass({
22
});
23
24
React.renderComponent(
25
- <GenericWrapper><span/><span/><span/></GenericWrapper>,
25
+ <GenericWrapper><span/><span/><span/></GenericWrapper>,
26
mountNode
27
);
28
```
29
30
-To save an extra array allocation, it returns the component itself _without the array wrapper_ when there's only one child.
30
+However, when there is only a single child, `this.props.children` will be the single child component itself _without the array wrapper_. This saves an array allocation.
31
32
```js
33
/** @jsx React.DOM */
34
35
var GenericWrapper = React.createClass({
36
componentDidMount: function() {
37
- // **warning**: yields 5 for length of the string 'hello', not 1 for the
37
+ console.log(Array.isArray(this.props.children)); // => false
38
+
39
+ // warning: yields 5 for length of the string 'hello', not 1 for the
40
// length of the non-existant array wrapper!
39
- console.log(this.props.children.length);
41
+ console.log(this.props.children.length);
42
},
43
render: function() {
44
return <div />;