React Rails component: manually triggering a re-render

Question

In Rails, I've got a set of Bootstrap tabs on a page with a React component on each one, ie:

<div id="tab-1" class="tab-pane">
  ...
  <%= react_component('PeopleWidget', person_id: @person.id) %>  
  ...
</div>

<div id="tab-2" class="tab-pane">
  ...
  <%= react_component('ContentWidget', content_id: @content.id) %>
  ...
</div>

The components:

• Do not talk with each other
• Update a RESTful backend

Now:

• PeopleWidget can update a person's permissions in the backend
• This should change ContentWidget to read-only behavior

My tactical solution is:

• On Bootstrap event when tab-2 is shown, I would like to manually trigger ContentWidget render.
• This will initiate loading updated details from backend
• ContentWidget will have proper updated behavior

This feels like a workaround but I have a timeline :)

I can't figure out how to manually trigger the ContentWidget to re-render. Is this possible?

Answer 1

You could employ a tactic from Flux: you could set up an event listener in your component, and when the event happens, re-render using forceUpdate.

In Flux, components listen to stores. In your case, you could listen to the events triggered by Bootstrap tabs.

For example, to handle the event when the tab is shown:

var ContentWidget = React.createClass({
    _handleTabShow: function() {
      this.forceUpdate()
      // any other reload/re-render code here, too
    },

    componentWillMount: function() { 
      // start listening for show event:
      $('#tab-2').on('shown.bs.tab', this._handleTabShow)
    },

    componentWillUnmount: function() {
      // clean up the handler when the component is removed:
      $('#tab-2').off('shown.bs.tab', this._handleTabShow)     
    }

    // The rest of your component code 
    // goes here....
})