ag-grid-react 无法正确渲染
Posted
技术标签:
【中文标题】ag-grid-react 无法正确渲染【英文标题】:ag-grid-react does not render properly 【发布时间】:2017-01-29 05:13:04 【问题描述】:按照文档中的示例: https://www.ag-grid.com/best-react-data-grid/index.php
创建新的 react 应用后(在不同的机器上尝试过多次)
create-react-app whatever
如果我应用样式表(ag-grid.css 和 theme-fresh.css),所有呈现的都是页面上的一条灰线。任何其他组合都会呈现空白页面。删除 ag-grid.css 会呈现网格,但它会到处乱七八糟。
最近有人用 React 成功地使用过这个吗?有没有人推荐一些不同的东西? (要求:分页、排序、过滤、可选行)
谢谢 :-)
import React, Component from 'react';
import AgGridReact from 'ag-grid-react';
import '../node_modules/ag-grid/dist/styles/ag-grid.css';
import '../node_modules/ag-grid/dist/styles/theme-fresh.css';
class App extends Component
constructor(props)
super(props);
this.state =
columnDefs: [
headerName: 'First Name', field: 'name' ,
headerName: 'Last Name', field: 'lname'
],
rowData: [
name: 'Dave', lname: 'Smith' ,
name: 'Tommy', lname: 'Smith' ,
name: 'Lea', lname: 'Jones'
]
render()
return (
<div className="ag-fresh">
<AgGridReact
columnDefs=this.state.columnDefs
rowData=this.state.rowData
rowSelection="multiple"
enableColResize="true"
enableSorting="true"
enableFilter="true"
groupHeaders="true"
rowHeight="22"
debug="true"
/>
</div>
);
export default App;
【问题讨论】:
【参考方案1】:外部网格需要一个高度 :-(
文档没有显示这一点。不知道为什么网格没有最小默认高度,但没有。
【讨论】:
该死的。我从来没有想过。【参考方案2】:所以本质上你需要这样的东西,其中网格被一个具有高度的元素包裹:
<div className="ag-fresh">
<div className="grid_height_fix">
<AgGridReact columnDefs=this.state.columnDefs rowData=this.state.data.gridDate >
</AgGridReact>
</div>
</div>
.grid_height_fix height:800px;
【讨论】:
以上是关于ag-grid-react 无法正确渲染的主要内容,如果未能解决你的问题,请参考以下文章