1

我正在使用带有反应的 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 模块。网格行不正确，数据以垂直方式显示。我无法理解是什么问题。

任何帮助深表感谢。提前致谢。

4

0 回答 0