mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-25 23:05:23 +00:00
42 lines
1.4 KiB
Markdown
42 lines
1.4 KiB
Markdown
---
|
|
id: communicate-between-components
|
|
title: Communicate Between Components
|
|
layout: tips
|
|
permalink: communicate-between-components.html
|
|
prev: false-in-jsx.html
|
|
next: expose-component-functions.html
|
|
---
|
|
|
|
For parent-child communication, simply [pass props](/react/docs/multiple-components.html).
|
|
|
|
For child-parent communication:
|
|
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:
|
|
|
|
```js
|
|
var GroceryList = React.createClass({
|
|
handleClick: function(i) {
|
|
console.log('You clicked: ' + this.props.items[i]);
|
|
},
|
|
|
|
render: function() {
|
|
return (
|
|
<div>
|
|
{this.props.items.map(function(item, i) {
|
|
return (
|
|
<div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
|
|
);
|
|
}, this)}
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(
|
|
<GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
|
|
);
|
|
```
|
|
|
|
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.
|
|
|
|
For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in `componentDidMount()`, unsubscribe in `componentWillUnmount()`, and call `setState()` when you receive an event. [Flux](https://facebook.github.io/flux/) pattern is one of the possible ways to arrange this.
|