javascript - 从组件外部更新已渲染的 ReactJS 组件的正确方法

Question

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

在我的一个 Controller 中，我有以下逻辑来呈现 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，并且我的 Controller 包含以下代码来监听查询字符串更改。

  $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) 调用不是执行此操作的正确方法。

谢谢:)

Answer 1

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

您还可以在单​​击列标题或分页按钮时向其传递回调，并以 Angular 做出相应的 react 。