You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

50 lines
1.2 KiB

---
id: children-props-type
title: Type of the Children props
layout: tips
permalink: children-props-type.html
prev: style-props-value-px.html
next: controlled-input-null-value.html
---
Usually, a component's children (`this.props.children`) is an array of components:
11 years ago
```js
/** @jsx React.DOM */
var GenericWrapper = React.createClass({
componentDidMount: function() {
console.log(Array.isArray(this.props.children)); // => true
},
render: function() {
return <div />;
}
});
React.renderComponent(
<GenericWrapper><span/><span/><span/></GenericWrapper>,
11 years ago
mountNode
);
```
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.
11 years ago
```js
/** @jsx React.DOM */
var GenericWrapper = React.createClass({
componentDidMount: function() {
console.log(Array.isArray(this.props.children)); // => false
// warning: yields 5 for length of the string 'hello', not 1 for the
11 years ago
// length of the non-existant array wrapper!
console.log(this.props.children.length);
11 years ago
},
render: function() {
return <div />;
}
});
React.renderComponent(<GenericWrapper>hello</GenericWrapper>, mountNode);
```