可能的问题是在使用AG Grid中的自定义主细节视图时,组件的函数可能不会以正确的方式呈现。为了解决这个问题,您可以尝试使用以下方法之一:
1.检查函数组件的命名,以确保它们在使用时正确引用。
2.在主组件中包含子组件并正确地设置props。以下是一个示例:
import React, {useState} from 'react';
import {AgGridReact} from 'ag-grid-react';
import 'ag-grid-enterprise';
const MasterDetailGridExample = () => {
const [rowData, setRowData] = useState([]);
const [detailRowData, setDetailRowData] = useState([]);
const columnDefs = [
{field: 'make', sortable: true, filter: true},
{field: 'model', sortable: true, filter: true},
{field: 'price', sortable: true, filter: true},
];
const detailCellRendererParams = {
detailGridOptions: {
columnDefs: [
{field: 'color', sortable: true, filter: true},
{field: 'year', sortable: true, filter: true},
{field: 'hasSunroof', sortable: true, filter: true},
{field: 'isFourWheelDrive', sortable: true, filter: true},
],
onFirstDataRendered: (params) => {
params.api.sizeColumnsToFit();
},
},
getDetailRowData: (params) => {
setDetailRowData(params.data.details);
params.successCallback(params.data.details);
},
};
const rowData = [
{
make: 'Toyota',
model: 'Celica',
price: 35000,
details: [
{
color: 'blue',
year: 2020,
hasSunroof: false,
isFourWheelDrive: true,
},
{
color: 'green',
year: 2019,
hasSunroof: true,
isFourWheelDrive: true,
},
],
},
{
make: 'Ford',
model: 'Mondeo',
price: 32000,
details: [
{
color: 'red',
year: 2018,
hasSunroof: true,
isFourWheelDrive: false,
},
{
color: 'black',
year: 2021,
hasSunroof: false,
isFourWheelDrive: true,
},
],
},
];
const onGridReady =
上一篇:aggrid自定义状态栏