Browse Source

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

Component ref entry wasn't registered in nav_tips.
main
Cheng Lou 11 years ago
parent
commit
5bc8b15d63
  1. 4
      _data/nav_tips.yml
  2. 1
      tips/15-expose-component-functions.md
  3. 1
      tips/16-references-to-components.md
  4. 29
      tips/17-children-undefined.md

4
_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

1
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.

1
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:

29
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.
Loading…
Cancel
Save