在 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
重新渲染。这可能吗?
最佳答案
您可以采用 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....
})
关于javascript - React Rails 组件 : manually triggering a re-render,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30698224/