Question

我在AngularJS应用程序中使用ReactJS组件。

在我的一个控制器中，我有以下逻辑，它呈现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组件的状态，从而导致组件重新呈现。

我想知道如果我正在侦听在反应组件之外触发的事件，这是否是在安装组件后更新/重新渲染组件的正确方法。似乎component.pageOrders(page, sort)调用不是正确的方法。

谢谢：）

Answer 1

在这种情况下，组件可能不需要状态。如果以角度方式管理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({});

您还可以在单击列标题或分页按钮时传递回调，并以角度进行相应的反应。

从该组件外部更新已呈现的ReactJS组件的正确方法

1 个答案: