带有反应的ag-grid不起作用答案

【问题标题】：ag-grid with react not working带有反应的ag-grid不起作用
【发布时间】：2018-02-20 18:18:26
【问题描述】：

让 ag-Grid 与我的 react 应用程序一起工作时遇到问题。无论我尝试什么，我只得到一些文本，我看不到网格。我不知道我错过了什么。这是我的代码：

/*
 * ----------------------------
 * index.js
 * ----------------------------
 */

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'));
registerServiceWorker();

/*
 * ----------------------------
 * App.js
 * ----------------------------
 */

import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';
import './Styles/App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header />
        <Main />
      </div>
    );
  }
}

export default App;

/*
 * ----------------------------
 * Header.js
 * ----------------------------
 */

import React, { Component } from 'react';
import { Link } from 'react-router-dom'
import './Styles/Header.css';

class Header extends Component {
  render() {
    return (
        <div className="App-header">
          <h2>MY APPLICATION</h2>
          <Link to='/'>Home</Link>
          <Link to='/cities'>Cities</Link>
          <Link to='/countries'>Countries</Link>
        </div>
    );
  }
}

export default Header;

/*
 * ----------------------------
 * Main.js
 * ----------------------------
 */

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './Pages/Home';
import Stations from './Pages/Cities';
import Countries from './Pages/Countries';

class Main extends Component {
  render() {
    return (
        <div className="App-main">
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/cities' component={Cities}/>
            <Route path='/countries' component={Countries}/>
          </Switch>
        </div>
    );
  }
}

export default Main;

/*
 * ----------------------------
 * Countries.js
 * ----------------------------
 */

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

class Countries extends Component {
  constructor(props) {
    super(props);
    this.state = {
      columnDefs: this.createColumnDefs(),
      rowData: this.createRowData()
    };
  }

  createColumnDefs() {
    return [
      {headerName: "#", width: "30px", checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true },
      {headerName: "Name", field: "name"},
      {headerName: "Abbreviation", field: "abbr"},
      {headerName: "id", field: "id"}
    ];
  }

  createRowData() {
    return [
      {name: "Sweden", id: 1, abbr: "SE"},
      {make: "Denmark", id: 2, abbr: "DK"},
      {make: "Norway", id: 3, abbr: "NO"}
    ];
  }

  render() {
    let containerStyle = {
      height: '800px',
      width: '500px',
      margin: 'auto'
    };

    //console.log(this.state.columnDefs);

    return (
      <div>
        <div style={containerStyle} className="ag-fresh">
          <AgGridReact
            // properties
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
            groupHeaders="false"
            rowSelection="multiple"
            enableColResize="true"
            enableSorting="true"
            enableFilter="true"
            rowHeight="22"
            debug="true"
          />
        </div>
      </div>
    )
  }
};

export default Countries;

我没有包含一些 CSS 文件和 Home.js 和 Cities.js，因为它们目前什么都不渲染。这是我得到的结果：

如您所见，我没有看到网格，只是一些奇怪的文字。我一直在浏览 ag-grid 主页并尝试他们的示例代码，但我一直得到这个。

有什么想法吗？

【问题讨论】：

您确实收到了警告，要求您使用数字而不是字符串作为列宽...

标签： javascript reactjs ag-grid ag-grid-react

【解决方案1】：

这一行是你的问题：

{headerName: "#", width: "30px", checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true },

改成这样：

  {headerName: "#", width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true },

在控制台的错误中发现，虽然只是一个警告，但还是把网格弄乱了，无法渲染

【讨论】：

【解决方案2】：

问题出在以下部分：

<div style={containerStyle} className="ag-fresh">

您想使用“ag-fresh”设置样式，但没有导入相关的 CSS 文件。我已经在我的笔记本电脑上尝试过你的代码，但提供了我拥有的那个样式。有效。因此，您必须通过 import 语句为样式提供相关的 CSS 文件，如下所示：

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

上面的额外导入只是一个例子，你必须导入你的实际 CSS。文件。

【讨论】：