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 triggerContentWidget
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?
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: