docs tips parent-child communication
Cheng Lou committed
Nov 24, 2013 at 16:17 UTC
e98244adb5c2d562f9118a5bc366287225004158
3 files changed
+43
docs/_data/nav_tips.yml
+2
@@ -26,3 +26,5 @@
26
title: Load Initial Data via AJAX
27
- id: false-in-jsx
28
title: False in JSX
29
+ - id: communicate-between-components
30
+ title: Communicate Between Components
docs/tips/13-false-in-jsx.md
+1
@@ -4,6 +4,7 @@ title: False in JSX
4
layout: tips
5
permalink: false-in-jsx.html
6
prev: initial-ajax.html
7
+next: communicate-between-components.html
8
---
9
10
Here's how `false` renders in different contexts:
docs/tips/14-communicate-between-components.md
new
+40
@@ -0,0 +1,40 @@
1
+---
2
+id: communicate-between-components
3
+title: Communicate Between Components
4
+layout: tips
5
+permalink: communicate-between-components.html
6
+prev: false-in-jsx.html
7
+---
8
+
9
+For parent-child communication, simply [pass props](/react/docs/multiple-components.html).
10
+
11
+For child-parent communication:
12
+Say your `GroceryList` component has a list of items generated through an array. When a list item is clicked, you want to display its name:
13
+
14
+```js
15
+/** @jsx React.DOM */
16
+
17
+var GroceryList = React.createClass({
18
+ handleClick: function(i) {
19
+ console.log('You clicked: ' + this.props.items[i]);
20
+ },
21
+
22
+ render: function() {
23
+ return (
24
+ <div>
25
+ {this.props.items.map(function(item, i) {
26
+ return (
27
+ <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
28
+ );
29
+ }, this)}
30
+ </div>
31
+ );
32
+ }
33
+});
34
+
35
+React.renderComponent(
36
+ <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
37
+);
38
+```
39
+
40
+Notice the use of `bind(this, arg1, arg2, ...)`: we're simply passing more arguments to `handleClick`. This is not a new React concept; it's just JavaScript.