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

React Rails component: manually triggering a re-render

本文关键字：新渲染 Rails 组件 React      更新时间：2023-09-26

在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显示时，我想手动触发ContentWidget渲染。
  • 这将启动从后端加载更新的详细信息
  • ContentWidget将有适当的更新行为

这感觉像一个变通，但我有一个时间轴:)

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

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

在Flux中，组件监听存储。在您的示例中，您可以监听由Bootstrap选项卡触发的事件。

例如，要处理选项卡显示时的事件:

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

你可以使用forceUpdate让组件重新渲染

相关文章：