2

在 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为只读行为

我的战术解决方案是：

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

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

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

4

2 回答 2

3

你可以使用 Flux 的策略：你可以在你的组件中设置一个事件监听器，当事件发生时，使用forceUpdate.

在 Flux 中，组件监听存储。在您的情况下，您可以收听由 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....
})
于 2015-06-08T16:33:40.880 回答
0

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

于 2015-06-07T21:08:38.507 回答