From 4e3dd233167315cafe99ed4618a4e4ee27e3f2df Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Tue, 29 Oct 2013 14:20:04 -0400 Subject: [PATCH 1/2] fix 2 more entries --- cookbook/11-dom-event-listeners.md | 4 ++-- cookbook/12-initial-ajax.md | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/cookbook/11-dom-event-listeners.md b/cookbook/11-dom-event-listeners.md index 1336953a..d0a89a5a 100644 --- a/cookbook/11-dom-event-listeners.md +++ b/cookbook/11-dom-event-listeners.md @@ -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
Current window width: {this.state.windowWidth}
; diff --git a/cookbook/12-initial-ajax.md b/cookbook/12-initial-ajax.md index af867670..700fdcd3 100644 --- a/cookbook/12-initial-ajax.md +++ b/cookbook/12-initial-ajax.md @@ -41,6 +41,7 @@ var UserGist = React.createClass({ }); React.renderComponent( - , mountNode + , + mountNode ); ``` From e6101bd4ca4950a7dd773012eb2576d4e974edca Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Tue, 29 Oct 2013 14:55:11 -0400 Subject: [PATCH 2/2] ex for entry 7 --- cookbook/07-children-prop-type.md | 39 +++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/cookbook/07-children-prop-type.md b/cookbook/07-children-prop-type.md index 4ce5ec74..c22699ed 100644 --- a/cookbook/07-children-prop-type.md +++ b/cookbook/07-children-prop-type.md @@ -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
; + } +}); + +React.renderComponent( + , + 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
; + } +}); + +React.renderComponent(hello, mountNode); +```