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

Question

在 Rails 中，我在页面上有一组 Bootstrap 选项卡，每个选项卡上都有一个 React 组件，即：

<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>

组件：

不互相说话
更新 RESTful 后端

现在：

PeopleWidget可以在后台更新一个人的权限
这应该将 ContentWidget 更改为只读行为

我的战术方案是：

在显示 tab-2 的 Bootstrap 事件上，我想手动触发 ContentWidget 渲染。
这将启动从后端加载更新的详细信息
ContentWidget 将有适当的更新行为

这感觉像是一种解决方法，但我有一个时间表 :)

我不知道如何手动触发 ContentWidget 重新渲染。这可能吗？

Answer 1

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

Answer 2

您可以采用 Flux 的策略：您可以在组件中设置一个事件侦听器，当事件发生时，使用 forceUpdate 重新渲染。

在 Flux 中，组件监听存储。在您的情况下，您可以收听 events triggered by Bootstrap tabs。

例如标签页显示时处理事件：

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

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

React Rails component: manually triggering a re-render

javascript

jquery

ruby-on-rails

reactjs

react-rails