Expose Component Functions

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

varTodo=React.createClass({render:function(){return<divonClick={this.props.onClick}>{this.props.title}</div>;},//this component will be accessed by the parent through the `ref` attributeanimate:function(){console.log('Pretend %s is animating',this.props.title);}});varTodos=React.createClass({getInitialState:function(){return{items:['Apple','Banana','Cranberry']};},handleClick:function(index){varitems=this.state.items.filter(function(item,i){returnindex!==i;});this.setState({items:items},function(){if(items.length===1){this.refs.item0.animate();}}.bind(this));},render:function(){return(<div>{this.state.items.map(function(item,i){varboundClick=this.handleClick.bind(this,i);return(<TodoonClick={boundClick}key={i}title={item}ref={'item'+i}/>);},this)}</div>);}});React.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.