首页 文章

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

提问于
浏览 次
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 更改为只读行为

我的战术解决方案是：

  • 在显示 tab-2 时的Bootstrap事件中，我想手动触发 ContentWidget render .

  • 这将启动从后端加载更新的详细信息

  • ContentWidget 将有适当的更新行为

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

I can't figure out how to manually trigger the ContentWidget to re-render. Is this possible?

javascript jquery ruby-on-rails reactjs react-rails

2 回答

  • 3

    您可以使用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....
})
    回复于
  • 0

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

    回复于

相关问题