Browse Source

Merge pull request #17 from chenglou/feat-documentation-cookbook

fix 3 more entries
main
Connor McSheffrey 11 years ago
parent
commit
1c0b37f10a
  1. 39
      cookbook/07-children-prop-type.md
  2. 4
      cookbook/11-dom-event-listeners.md
  3. 3
      cookbook/12-initial-ajax.md

39
cookbook/07-children-prop-type.md

@ -7,6 +7,41 @@ prev: style-prop-value-px.html
next: controlled-input-null-value.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);
```

4
cookbook/11-dom-event-listeners.md

@ -24,10 +24,10 @@ var Box = React.createClass({
this.setState({windowWidth: window.innerWidth}); this.setState({windowWidth: window.innerWidth});
}, },
componentDidMount: function() { componentDidMount: function() {
window.addEventListener("resize", this.handleResize); window.addEventListener('resize', this.handleResize);
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
window.removeEventListener("resize", this.handleResize); window.removeEventListener('resize', this.handleResize);
}, },
render: function() { render: function() {
return <div>Current window width: {this.state.windowWidth}</div>; return <div>Current window width: {this.state.windowWidth}</div>;

3
cookbook/12-initial-ajax.md

@ -41,6 +41,7 @@ var UserGist = React.createClass({
}); });
React.renderComponent( React.renderComponent(
<UserGist source="https://api.github.com/users/octocat/gists" />, mountNode <UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
); );
``` ```

Loading…
Cancel
Save