- 确保你的 React 和 ag-grid-react 版本兼容。查看ag-grid-react文档中的相应说明。
- 确保在webpack的配置文件中加入以下代码,在生产构建中忽略React的development版本依赖:
module.exports = {
...
plugins: [
...
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
...
]
}
- 确保设置了正确的ag-grid-react主题。
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css"; // ag-grid-react主题
- 如果以上方法都没有解决问题,可以尝试将ag-grid-react改为ag-grid-community,使用React渲染单元格。这个方法需要重新构建应用程序。
import {AgGridReact} from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
function App() {
const columnDefs = [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" },
];
const rowData = [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxter", price: 72000 },
];
return (
);
}
export default App;