ex for entry 7
Cheng Lou committed
Oct 29, 2013 at 14:55 UTC
7d50ab600f0a3aff025835d20da4eff135c01aaf
1 file changed
+37
-2
docs/cookbook/07-children-prop-type.md
+37
-2
@@ -7,6 +7,41 @@ prev: style-prop-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. To save an extra array allocation, it returns the component itself when there's only one.
10
+Usually, a component's `this.props.children` is an array of components:
11
12
-This means accessing, for example, `this.props.children.length` might be misleading, as it could either be the `length` property of the array of children, or that of a single string component.
12
+```js
13
+/** @jsx React.DOM */
14
+
15
+var GenericWrapper = React.createClass({
16
+ componentDidMount: function() {
17
+ console.log(Array.isArray(this.props.children)); // => true
18
+ },
19
+ render: function() {
20
+ return <div />;
21
+ }
22
+});
23
+
24
+React.renderComponent(
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.
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
38
+ // length of the non-existant array wrapper!
39
+ console.log(this.props.children.length);
40
+ },
41
+ render: function() {
42
+ return <div />;
43
+ }
44
+});
45
+
46
+React.renderComponent(<GenericWrapper>hello</GenericWrapper>, mountNode);
47
+```