React Rails组件：手动触发重新渲染

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....
})

Answer 2

您可以使用forceUpdate来重新渲染组件