如何在 Ag Grid React 中更改上下文答案

【问题标题】：How to change context in Ag Grid React如何在 Ag Grid React 中更改上下文
【发布时间】：2021-11-25 02:03:32
【问题描述】：

我正在尝试使用 documentation 向我的 React Ag Grid 应用程序添加上下文。我的问题是他们的代码示例没有使用我创建网格的方式。这就是他们添加上下文的方式

var gridOptions = {
    columnDefs: columnDefs,
    defaultColDef: {
        flex: 1,
        resizable: true
    },
    rowData: rowData,
    context: {
        reportingCurrency: 'EUR'
    },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

他们像这样改变上下文值

function currencyChanged() {
    var value = document.getElementById('currency').value;
    gridOptions.context = {reportingCurrency: value};
    gridOptions.api.refreshCells();
    gridOptions.api.refreshHeader();
}

虽然我正在使用 React，所以我正在像这样创建我的组件

const [gridParams, setGridParams] = useState(null);

const onFirstDataRendered = (params) => {
  setGridParams(params)
}

<AgGridReact
  columnDefs={columnDefs}
  defaultColDef={{
        flex: 1,
        resizable: true
  }}
  rowData={rowData}
  context={{ reportingCurrency: 'EUR' }}
  onFirstDataRendered={onFirstDataRendered}
>

这就是我在文件中更改上下文的方式

const currencyChange = (value) => {
     gridParams.context = { reportingCurrency: value };
     gridParams.api.refreshCells();
};

当我像这样更新上下文时，我的单元格看不到上下文发生了变化。由于文档没有显示如何为 React 实现这一点，我想我只是错过了一些东西。有谁知道那可能是什么？

【问题讨论】：

你在使用自定义单元格渲染器吗？
是的，我只是不想在这个例子中添加太多额外的代码。那会有什么不同吗？

标签： javascript reactjs ag-grid

【解决方案1】：

看起来改变上下文的方式实际上是不同的。看了一圈，貌似需要改成这样

const currencyChange = (value) => {
     gridParams.api.gridOptionsWrapper.gridOptions.context = { reportingCurrency: value };
     gridParams.api.refreshCells();
};

【讨论】：