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

【问题标题】：React Rails component: manually triggering a re-renderReact Rails 组件：手动触发重新渲染
【发布时间】：2015-06-07 20:36:17
【问题描述】：

在 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 重新渲染。这可能吗？

【问题讨论】：

如果组件的状态发生变化，它会重新渲染。比如打电话给setState。或提供新的属性值。但是，我不希望渲染触发要加载的数据。您不应该依赖render 作为触发器。它可能被调用得太频繁（或不够）。

标签： javascript jquery ruby-on-rails reactjs react-rails

【解决方案1】：

你可以使用 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....
})

【讨论】：

谢谢。现在很明显:)

【解决方案2】：

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

【讨论】：

谢谢。您在我的代码上下文中有一个简短的代码示例吗？我在文档中看到了forceUpdate，但不知道如何在我现有的代码中使用它。