Browse Source

Children props tip tweak

main
Paul O’Shannessy 11 years ago
parent
commit
710f54b605
  1. 12
      tips/07-children-props-type.md

12
tips/07-children-props-type.md

@ -7,7 +7,7 @@ prev: style-props-value-px.html
next: controlled-input-null-value.html
---
Usually, a component's `this.props.children` is an array of components:
Usually, a component's children (`this.props.children`) is an array of components:
```js
/** @jsx React.DOM */
@ -22,21 +22,23 @@ var GenericWrapper = React.createClass({
});
React.renderComponent(
<GenericWrapper><span/><span/><span/></GenericWrapper>,
<GenericWrapper><span/><span/><span/></GenericWrapper>,
mountNode
);
```
To save an extra array allocation, it returns the component itself _without the array wrapper_ when there's only one child.
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.
```js
/** @jsx React.DOM */
var GenericWrapper = React.createClass({
componentDidMount: function() {
// **warning**: yields 5 for length of the string 'hello', not 1 for the
console.log(Array.isArray(this.props.children)); // => false
// warning: yields 5 for length of the string 'hello', not 1 for the
// length of the non-existant array wrapper!
console.log(this.props.children.length);
console.log(this.props.children.length);
},
render: function() {
return <div />;

Loading…
Cancel
Save