Merge pull request #1338 from chenglou/tip-children

[Docs][Tips] Entry on this.props.children and tweak component ref entry

_data/nav_tips.yml

@@ -30,3 +30,7 @@
     title: Communicate Between Components
   - id: expose-component-functions
     title: Expose Component Functions
+  - id: references-to-components
+    title: References to Components
+  - id: children-undefined
+    title: this.props.children undefined

tips/15-expose-component-functions.md

@@ -4,6 +4,7 @@ title: Expose Component Functions
 layout: tips
 permalink: expose-component-functions.html
 prev: communicate-between-components.html
+next: references-to-components.html
 ---
 
 There's another (uncommon) way of [communicating between components](/react/tips/communicate-between-components.html): simply expose a method on the child component for the parent to call.

tips/16-references-to-components.md

@@ -4,6 +4,7 @@ title: References to Components
 layout: tips
 permalink: references-to-components.html
 prev: expose-component-functions.html
+next: children-undefined.html
 ---
 
 If you're using React components in a larger non-React application or transitioning your code to React, you may need to keep references to components. `React.renderComponent` returns a reference to the mounted component:

tips/17-children-undefined.md

@@ -0,0 +1,29 @@
+---
+id: children-undefined
+title: this.props.children undefined
+layout: tips
+permalink: children-undefined.html
+prev: references-to-components.html
+---
+
+You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner:
+
+```js
+/** @jsx React.DOM */
+
+var App = React.createClass({
+  componentDidMount: function() {
+    // This doesn't refer to the `span`s! It refers to the children between
+    // last line's `<App></App>`, which are undefined.
+    console.log(this.props.children);
+  },
+
+  render: function() {
+    return <div><span/><span/></div>;
+  }
+});
+
+React.renderComponent(<App></App>, mountNode);
+```
+
+To access your own subcomponents (the `span`s), place [refs](http://facebook.github.io/react/docs/more-about-refs.html) on them.