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.
Kunal Mehta committed
Jan 30, 2014 at 17:08 UTC
43a242b67ffa819f765adf7954c00c700a37e22c
2 files changed
+32
-1
docs/docs/ref-01-top-level-api.md
+1
-1
@@ -46,7 +46,7 @@ ReactComponent renderComponent(
46
)
47
```
48
49
-Render a React component into the DOM in the supplied `container`.
49
+Render a React component into the DOM in the supplied `container` and return a reference to the component.
50
51
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.
52
docs/tips/16-references-to-components.md
new
+31
@@ -0,0 +1,31 @@
1
+---
2
+id: references-to-components
3
+title: References to Components
4
+layout: tips
5
+permalink: references-to-components.html
6
+prev: expose-component-functions.html
7
+---
8
+
9
+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:
10
+
11
+```js
12
+/** @jsx React.DOM */
13
+
14
+var myComponent = React.renderComponent(<MyComponent />, myContainer);
15
+```
16
+
17
+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:
18
+
19
+```js
20
+/** @jsx React.DOM */
21
+
22
+var myComponent = <MyComponent />;
23
+
24
+// Some code here...
25
+
26
+myComponent = React.renderComponent(myComponent, myContainer);
27
+```
28
+
29
+> Note:
30
+>
31
+> 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.