mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Merge pull request #17 from chenglou/feat-documentation-cookbook
fix 3 more entries
This commit is contained in:
@@ -7,6 +7,41 @@ prev: style-prop-value-px.html
|
||||
next: controlled-input-null-value.html
|
||||
---
|
||||
|
||||
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.
|
||||
Usually, a component's `this.props.children` is an array of components:
|
||||
|
||||
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.
|
||||
```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>,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
||||
To save an extra array allocation, it returns the component itself _without the array wrapper_ when there's only one child.
|
||||
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
|
||||
var GenericWrapper = React.createClass({
|
||||
componentDidMount: function() {
|
||||
// **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);
|
||||
},
|
||||
render: function() {
|
||||
return <div />;
|
||||
}
|
||||
});
|
||||
|
||||
React.renderComponent(<GenericWrapper>hello</GenericWrapper>, mountNode);
|
||||
```
|
||||
|
||||
@@ -24,10 +24,10 @@ var Box = React.createClass({
|
||||
this.setState({windowWidth: window.innerWidth});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
},
|
||||
render: function() {
|
||||
return <div>Current window width: {this.state.windowWidth}</div>;
|
||||
|
||||
@@ -41,6 +41,7 @@ var UserGist = React.createClass({
|
||||
});
|
||||
|
||||
React.renderComponent(
|
||||
<UserGist source="https://api.github.com/users/octocat/gists" />, mountNode
|
||||
<UserGist source="https://api.github.com/users/octocat/gists" />,
|
||||
mountNode
|
||||
);
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user