Expose Component Functions

There’s another (uncommon) way of communicating between components: simply expose a method on the child component for the parent to call.

Say a list of todos, which upon clicking get removed. If there’s only one unfinished todo left, animate it:

  1. var Todo = React.createClass({
  2.   render: function() {
  3.     return <div onClick={this.props.onClick}>{this.props.title}</div>;
  4.   },
  6.   //this component will be accessed by the parent through the `ref` attribute
  7.   animate: function() {
  8.     console.log('Pretend %s is animating', this.props.title);
  9.   }
  10. });
  12. var Todos = React.createClass({
  13.   getInitialState: function() {
  14.     return {items: ['Apple', 'Banana', 'Cranberry']};
  15.   },
  17.   handleClick: function(index) {
  18.     var items = this.state.items.filter(function(item, i) {
  19.       return index !== i;
  20.     });
  21.     this.setState({items: items}, function() {
  22.       if (items.length === 1) {
  23.         this.refs.item0.animate();
  24.       }
  25.     }.bind(this));
  26.   },
  28.   render: function() {
  29.     return (
  30.       <div>
  31.         {this.state.items.map(function(item, i) {
  32.           var boundClick = this.handleClick.bind(this, i);
  33.           return (
  34.             <Todo onClick={boundClick} key={i} title={item} ref={'item' + i} />
  35.           );
  36.         }, this)}
  37.       </div>
  38.     );
  39.   }
  40. });
  42. ReactDOM.render(<Todos />, mountNode);

Alternatively, you could have achieved this by passing the todo an isLastUnfinishedItem prop, let it check this prop in componentDidUpdate, then animate itself; however, this quickly gets messy if you pass around different props to control animations.