React + Ag-grid + Webpack

Question

我正在使用带有反应的ag-grid。而且我无法正确显示网格，

请在我的代码下面找到

import React, {Component} from 'react'
import {render} from 'react-dom'
import {AgGridReact} from 'ag-grid-react'

import Logo from './components/Logo/'
import Link from './components/Link/'
import Child from './child.jsx'

export default class App extends Component {

    constructor(props){
        super(props);

        this.state = {

                columnDefs: [
                    {headerName: "Name", field: "Name"},
                    {headerName: "Age", field: "Age"}
                    ],
                rowData: [
                    {"Name": "Man", "Age":"25"},
                    {"Name": "Pal", "Age":"27"}
                    ]
        }
    }

    onGridReady(params) {
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        this.gridApi.sizeColumnsToFit();
    }

    render() {

        return (
            <div>
                <p className="f5p"><img className="f5logo" src="./src/assets/index.png" alt="F5 Logo"></img></p>
                <h2 className="f5h1">CTU Log Viewer</h2>

                <ul className="f5ul">
                  <li className="f5li"><a href="#" className="f5a">Logs</a></li>
                  <li className="f5li"><a href="#" className="f5a">Command Logs</a></li>
                  <li className="f5li"><a href="#" className="f5a">Installed Packages</a></li>
                  <li className="f5liabout"><a href="#" className="f5a">About</a></li>
                </ul>

                <div className="ag-fresh">
                    <AgGridReact
                        columnDefs = {this.state.columnDefs}
                        rowData = {this.state.rowData}
                        onGridReady = {this.onGridReady}
                        />
                </div>

            </div>
        )
    }
}

我也在使用webpack，不确定webpack是否引起了问题。 我在webpack中使用babel，css-loader模块。 网格行未正确显示，数据以垂直方式显示。 我不明白是什么问题。

非常感谢您的帮助。 预先感谢。