From 5bc8b15d630fd7eafeeedaee0a26cb182e5ef78d Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Mon, 31 Mar 2014 19:12:16 -0700 Subject: [PATCH] [Docs][Tips] Entry on this.props.children and tweak component ref entry Component ref entry wasn't registered in nav_tips. --- _data/nav_tips.yml | 4 ++++ tips/15-expose-component-functions.md | 1 + tips/16-references-to-components.md | 1 + tips/17-children-undefined.md | 29 +++++++++++++++++++++++++++ 4 files changed, 35 insertions(+) create mode 100644 tips/17-children-undefined.md diff --git a/_data/nav_tips.yml b/_data/nav_tips.yml index 63875913..8299f6ea 100644 --- a/_data/nav_tips.yml +++ b/_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 diff --git a/tips/15-expose-component-functions.md b/tips/15-expose-component-functions.md index acf5ab92..a63880cd 100644 --- a/tips/15-expose-component-functions.md +++ b/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. diff --git a/tips/16-references-to-components.md b/tips/16-references-to-components.md index 38572276..93446dec 100644 --- a/tips/16-references-to-components.md +++ b/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: diff --git a/tips/17-children-undefined.md b/tips/17-children-undefined.md new file mode 100644 index 00000000..5ed9c938 --- /dev/null +++ b/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 ``, which are undefined. + console.log(this.props.children); + }, + + render: function() { + return
; + } +}); + +React.renderComponent(, mountNode); +``` + +To access your own subcomponents (the `span`s), place [refs](http://facebook.github.io/react/docs/more-about-refs.html) on them.