Here is an example of a clean way to communicate between React components without getting stuck passing @prop callbacks all around. Inspired by looking at the new Flux React utilities.
We’re going to start off with a simple HAML file:
1%script{src: "https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"}
2%div{data: { ui: 'alerts' }}
3%div{data: { ui: 'widgets' }}
4:javascript
5 React.renderComponent(Widgets(), document.querySelector('[data-ui="widgets"]'))
6 React.renderComponent(Alerts(), document.querySelector('[data-ui="alerts"]'))
Next comes our Widget component.
1{div, button} = React.DOM
2
3Widgets = React.createClass
4 render: ->
5 div className: 'widget',
6 button className: 'btn btn-primary', onClick: (=> @_sendMsg('Testing')), 'Click Me'
7 _sendMsg: (msg) ->
8 $('[data-ui="alerts"]').trigger("message", ["Widget clicked."])
On line 1 we’re defining some easy helper methods to access the React.DOM object - otherwise on every line we’d be writing something like React.DOM.div or whichever element we were going to call.