在 React 函数 组件中访问 ag-Grid API 的最佳方式是什么？
我必须使用 API 中的一些方法（getSelectedNodes、setColumnDefs 等），所以我在 onGridReady 事件处理程序中保存了对 API 的引用（使用 useState 钩子）：
onGridReady={params => {
setGridApi(params.api);
}}
然后我可以像这样调用 API：gridApi.getSelectedNodes()
我没有注意到这种方法有任何问题，但我想知道是否还有更多惯用方法？
堆栈：
【问题讨论】：
标签： function react-hooks ag-grid ag-grid-react
我们找到了使用 ref 最惯用的方式。因为 api 不是我们组件的状态。实际上可以简单地做：
<AgGridReact ref={grid}/>
然后与
一起使用grid.current.api
这里是一个例子：
import React, { useRef } from 'react'
import { AgGridReact } from 'ag-grid-react'
import { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact'
const ShopList = () => {
const grid = useRef<AgGridReactType>(null)
...
return (
<AgGridReact ref={grid} columnDefs={columnDefs} rowData={shops} />
)
}
这里的好处是，您可以访问 gridApi，但也可以访问 columnApi。就像这样：
// rendering menu to show/hide columns:
{columnDefs.map(columnDef =>
<>
<input
type='checkbox'
checked={
grid.current
? grid.current.columnApi.getColumn(columnDef.field).isVisible()
: !(columnDef as { hide: boolean }).hide
}
onChange={() => {
if (grid.current?.api) {
const col = grid.current.columnApi.getColumn(columnDef.field)
grid.current.columnApi.setColumnVisible(columnDef.field, !col.isVisible())
grid.current.api.sizeColumnsToFit()
setForceUpdate(x => ++x)
}
}}
/>
<span>{columnDef.headerName}</span>
</>
)}
【讨论】：
const grid = useRef<AgGridReactType>(null) 行上方添加 // prettier-ignore 以防止在 VS Code 中自动格式化它。
any。但只是想知道，为什么这个奇怪的导入import { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact'？您能否将我指向使用/说明的官方文档。我原以为这是一个“顶级”模块，就像深入到另一个模块的lib 一样。
import type { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact';
嗯，我正在我的项目中这样做。你可以使用useRef钩子来存储gridApi。
const gridApi = useRef();
const onGridReady = params => {
gridApi.current = params.api; // <== this is how you save it
const datasource = getServerDataSource(
gridApi.current,
{
size: AppConstants.PAGE_SIZE,
url: baseUrl,
defaultFilter: props.defaultFilter
}
);
gridApi.current.setServerSideDatasource(datasource); // <== this is how you use it
};
【讨论】：
我遇到了同样的问题，但这里有一个解决方法，至少可以让您选择选定的行。基本上我正在做的是将 api 从 agGrid 回调发送到另一个函数。具体来说，我使用 OnSelectionChanged 回调来获取当前行节点。示例如下：
const onSelectionChanged = params => {
setDetails(params.api.getSelectedRows());
};
return (<AgGridReact
columnDefs={agData.columnDefs}
rowSelection={'single'}
enableCellTextSelection={true}
defaultColDef={{
resizable: true,
}}
rowHeight={50}
rowData={agData.rowData}
onCellFocused={function(params) {
if (params.rowIndex != null) {
let nNode = params.api.getDisplayedRowAtIndex(params.rowIndex);
nNode.setSelected(true, true);
}
}}
onSelectionChanged={function(params) {
onSelectionChanged(params);
params.api.sizeColumnsToFit();
}}
onGridReady={function(params) {
let gridApi = params.api;
gridApi.sizeColumnsToFit();
}}
deltaRowDataMode={true}
getRowNodeId={function(data) {
return data.id;
}}
/>);
【讨论】：
只是想知道，为什么需要使用 state-hook，因为 gridApi 在生命周期内不会改变。
如果您检查 ag-grid 团队示例，您会发现他们只使用属性绑定：
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
};
所以我想，您不需要使用state 来存储API 引用。
【讨论】：
class GridExample extends Component {