Browse Source

Add documentation about React.renderComponent

Recently learned that components passed into `React.renderComponent` may not be the ones actually mounted. Also learned that it returns the mounted component. Added some documentation describing this.
main
Kunal Mehta 11 years ago
parent
commit
2ab43c462e
  1. 2
      docs/ref-01-top-level-api.md
  2. 31
      tips/16-references-to-components.md

2
docs/ref-01-top-level-api.md

@ -46,7 +46,7 @@ ReactComponent renderComponent(
)
```
Render a React component into the DOM in the supplied `container`.
Render a React component into the DOM in the supplied `container` and return a reference to the component.
If the React component was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.

31
tips/16-references-to-components.md

@ -0,0 +1,31 @@
---
id: references-to-components
title: References to Components
layout: tips
permalink: references-to-components.html
prev: expose-component-functions.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:
```js
/** @jsx React.DOM */
var myComponent = React.renderComponent(<MyComponent />, myContainer);
```
If you pass a variable to 'React.renderComponent`, it's not guaranteed that the component passed in will be the one that's mounted. In cases where you construct a component before mounting it, be sure to reassign your variable:
```js
/** @jsx React.DOM */
var myComponent = <MyComponent />;
// Some code here...
myComponent = React.renderComponent(myComponent, myContainer);
```
> Note:
>
> This should only ever be used at the top level. Inside components, let your `props` and `state` handle communication with child components, and only reference components via `ref`s.
Loading…
Cancel
Save