ag-grid反应表不显示？

Question

新反应和ag网格。我正在尝试在我的反应项目中实现一个简单的ag-grid示例。当我运行该项目时，网格不显示。没有控制台警告，只是网格不显示。

import React 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-material.css'; 

var headers = [{headerName: 'Name', field: 'name', width: 150, filter: 'text'}, 
       {headerName: 'Last', field: 'last', width: 150, filter: 'text'}] 

var data = [{name: 'bob', last:'dude'}, 
      {name: 'will', last:'willdude'}] 


export default class Accounts extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     showGrid: true, 
     columnDefs: headers, 
     rowData: data, 
    }; 
    } 
    onGridReady(params) { 
     this.api = params.api; 
     this.columnApi = params.columnApi; 
    } 

    render() { 
    var gridTemplate; 
    gridTemplate = (
     <div className="ag-material"> 
      <AgGridReact 
       columnDefs={this.state.columnDefs} 
       rowData={this.state.rowData} 
       onGridReady={this.onGridReady.bind(this)} 
       showGrid={this.state.showGrid} 
      /> 
     </div> 
    ); 
    return (
     <div style={{width: '800px'}}> 
     <p>I see this</p> 
     {gridTemplate} 
     </div> 
    ) 
    } 
} 

Answer 1

好了它，我们需要父DIV高度。

例如

<div className="ag-material" style={{height: '500px'}}> 
     <AgGridReact 
      columnDefs={this.state.columnDefs} 
      rowData={this.state.rowData} 
      onGridReady={this.onGridReady.bind(this)} 
      showGrid={this.state.showGrid} 
     /> 
    </div>