从组件外部更新已呈现的ReactJS组件的正确方法
从组件外部更新已呈现的ReactJS组件的正确方法
提问于 2014-12-18 01:47:10
我在一个ReactJS应用程序中使用AngularJS组件。
在我的一个控制器中，我有以下的逻辑来呈现一个OrdersTable组件。
var search = $location.search();
var page = search.hasOwnProperty('page') ? search.page : 0;
var sort = search.hasOwnProperty('sort') ? search.sort : 'number,desc';
var r = React.createFactory(OrdersTable);
var component = React.render(r({
ordersSummaryFn: OrderService.ordersSummary,
page: page,
sort: sort
}), document.querySelector('.order-wrapper'));当用户单击页面上的分页链接时，查询字符串将发生更改。我的路由配置已将reloadOnSearch设置为false，并且我的控制器包含以下代码以侦听查询字符串更改。
$scope.$on('$routeUpdate', function() {
search = $location.search();
page = search.hasOwnProperty('page') ? search.page : 0;
sort = search.hasOwnProperty('sort') ? search.sort : 'number,desc';
component.pageOrders(page, sort);
});因此，当页面和排序查询参数发生变化时，我将直接在组件的初始呈现中返回的组件上调用pageOrders方法。此方法对服务器执行ajax调用，然后更新OrdersTable组件的状态，从而导致组件重新呈现。
我想知道这是否是在组件被挂载后更新/重新呈现组件的正确方法，如果我正在侦听要在react组件之外触发的事件。似乎component.pageOrders(page, sort)调用并不是正确的方法。
谢谢:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-18 02:21:43
在这种情况下，组件可能不需要状态。如果您以角度管理http请求，那么react组件就更简单，更易于重用。
var containerTarget = document.querySelector('.order-wrapper');
// idempotent update function
function update(props){
React.render(React.createElement(OrdersTable, props), containerTarget);
}
var fetchDataAndUpdate = function(){
var search = $location.search();
var page = search.hasOwnProperty('page') ? search.page : 0;
var sort = search.hasOwnProperty('sort') ? search.sort : 'number,desc';
OrderService.ordersSummary({
page: page,
sort: sort
}).then(function(results){
update({data: results, page: page, sort: sort});
});
};
fetchDataAndUpdate();
$scope.$on('$routeUpdate', fetchDataAndUpdate);
// optionally do an initial render before you have data
update({});您也可以传递它的回调，当一个列标题，或分页按钮被点击，并作出相应的角度反应。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27537959
复制相关文章
相似问题
腾讯云开发者
