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

Correct approach for updating an already rendered ReactJS component from outside that component

本文关键字：组件 ReactJS 方法 外部 更新      更新时间：2023-09-26

我在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组件的状态，这反过来又会导致组件重新呈现。

我想知道如果我正在侦听要在 react 组件外部触发的事件，这是否是在挂载组件后更新/重新渲染组件的正确方法。 似乎component.pageOrders(page, sort)调用不是执行此操作的正确方法。

谢谢:)

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

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

相关文章：