javascript - React Rails组件:手动触发重新渲染

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

最佳答案

您可以采用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....
})