在使用ag-grid-react包装器时,每个组件必须有唯一的ID,否则会出现无法创建多个实例的问题。同时,在访问grid API时,需要通过ref引用进行访问。
以下是一个对Aggrid react包装器进行多实例和访问grid API的示例代码:
import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
class GridComponent extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [...],
rowData: [...],
};
this.gridId = `grid-${Math.floor(Math.random() * 1000)}`;
this.gridApi = null;
this.gridColumnApi = null;
this.gridRef = React.createRef();
}
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridApi.setRowData(this.state.rowData);
}
onButtonClick() {
const selection = this.gridApi.getSelectedNodes();
const selectedData = selection.map(node => node.data);
console.log(selectedData);
}
render() {
return (
);
}
}
export default GridComponent;