Reactjs 如何将ag网格封装到组件中?
我正在使用React with Redux。我有一张桌子,它是用ag网格制作的,用于反应。 表格数据可以在线编辑和保存 如何为该表创建包装器组件?我需要有多个具有相同功能的表,只是数据不同而已 在ag grid中,它展示了如何使用redux存储和还原器来实现,但是这个解决方案只适用于一个表,因为每个应用程序只有一个状态。我不想因为我有两个不同的数据列表而重复我的代码…这里有一个简单的例子Reactjs 如何将ag网格封装到组件中?,reactjs,redux,ag-grid-react,Reactjs,Redux,Ag Grid React,我正在使用React with Redux。我有一张桌子,它是用ag网格制作的,用于反应。 表格数据可以在线编辑和保存 如何为该表创建包装器组件?我需要有多个具有相同功能的表,只是数据不同而已 在ag grid中,它展示了如何使用redux存储和还原器来实现,但是这个解决方案只适用于一个表,因为每个应用程序只有一个状态。我不想因为我有两个不同的数据列表而重复我的代码…这里有一个简单的例子 // Grid.jsx import React, { PureComponent, } from
// Grid.jsx
import React, {
PureComponent,
} from 'react';
import {
AgGridReact,
} from 'ag-grid-react';
class Grid extends PureComponent {
state = {
columnDefs : [],
rowData : []
};
/**
* This will set your internal columnDefs & rowData
* from the props being passed in
* <Grid columnDefs={columnDefs} rowData={rowData} />
*/
static getDerivedStateFromProps(nextProps) {
const {
columnDefs,
rowData,
} = nextProps;
return {
columnDefs,
rowData,
};
}
render() {
const {
columnDefs,
rowData,
} = this.state;
return (
<AgGridReact
columnDefs={columnDefs}
rowData={rowData}
/>
);
}
}
export default Grid;
// ExampleImpl.jsx
import Grid from './Grid';
class ExampleImpl extends PureComponent {
render() {
// Assuming you got these from the connect
const rowData: [
{
name: "Ireland",
continent: "Europe",
language: "English",
code: "ie",
population: 4000000,
summary: "Master Drinkers"
},
];
const columnDefs: [
{
headerName: "Name",
field: "name",
cellRenderer: countryCellRenderer
},
{
headerName: "Continent",
field: "continent",
width: 150
},
{
headerName: "Language",
field: "language",
width: 150
}
];
return <Grid
rowData = {rowData}
columnDefs = {columnDefs}
/>
}
}
export default connect(ExampleImpl);
// ExampleImplII.jsx
import Grid from './Grid';
class ExampleImplII extends PureComponent {
render() {
// Assuming you got these from connect
const rowData: [
{
name: "Ireland",
continent: "Europe",
language: "English",
code: "ie",
population: 4000000,
summary: "Master Drinkers"
},
];
const columnDefs: [
{
headerName: "Name",
field: "name",
cellRenderer: countryCellRenderer
},
{
headerName: "Continent",
field: "continent",
width: 150
},
{
headerName: "Language",
field: "language",
width: 150
}
];
return <Grid
rowData={rowData}
columnDefs={columnDefs}
/>
}
}
export default connect(ExampleImplII);
这样,您就有了1个表示组件和2个容器组件智能组件,它们知道如何获取数据并将数据传递给表示组件。谢谢您的快速回答。我试过类似的东西。但我有自定义的cellEditorFramework列单元格编辑器,当我更改值时,我需要更改状态,在状态更改后,ag grid决定自己重新渲染它:或者我遗漏了什么