[Docs][Tips] Entry on this.props.children and tweak component ref entry
Component ref entry wasn't registered in nav_tips.
Cheng Lou committed
Mar 31, 2014 at 19:12 UTC
dc7242c7860a0538fe8fdf16cf022e3d48648fd7
4 files changed
+35
docs/_data/nav_tips.yml
+4
@@ -30,3 +30,7 @@
30
title: Communicate Between Components
31
- id: expose-component-functions
32
title: Expose Component Functions
33
+ - id: references-to-components
34
+ title: References to Components
35
+ - id: children-undefined
36
+ title: this.props.children undefined
docs/tips/15-expose-component-functions.md
+1
@@ -4,6 +4,7 @@ title: Expose Component Functions
4
layout: tips
5
permalink: expose-component-functions.html
6
prev: communicate-between-components.html
7
+next: references-to-components.html
8
---
9
10
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.
docs/tips/16-references-to-components.md
+1
@@ -4,6 +4,7 @@ title: References to Components
4
layout: tips
5
permalink: references-to-components.html
6
prev: expose-component-functions.html
7
+next: children-undefined.html
8
---
9
10
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:
docs/tips/17-children-undefined.md
new
+29
@@ -0,0 +1,29 @@
1
+---
2
+id: children-undefined
3
+title: this.props.children undefined
4
+layout: tips
5
+permalink: children-undefined.html
6
+prev: references-to-components.html
7
+---
8
+
9
+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:
10
+
11
+```js
12
+/** @jsx React.DOM */
13
+
14
+var App = React.createClass({
15
+ componentDidMount: function() {
16
+ // This doesn't refer to the `span`s! It refers to the children between
17
+ // last line's `<App></App>`, which are undefined.
18
+ console.log(this.props.children);
19
+ },
20
+
21
+ render: function() {
22
+ return <div><span/><span/></div>;
23
+ }
24
+});
25
+
26
+React.renderComponent(<App></App>, mountNode);
27
+```
28
+
29
+To access your own subcomponents (the `span`s), place [refs](http://facebook.github.io/react/docs/more-about-refs.html) on them.