反応しないag-grid

Question

私の反応アプリでag-Gridを動作させるのに問題があります。私が何をしようと、何かテキストしか得られない、私はグリッドを見ない。私は何が欠けているのか分からない。ここに私のコードは次のとおりです。

/* 
* ---------------------------- 
* 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のホームページを見て、サンプルコードを試していましたが、これはいつも得意です。

アイデア？これに

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

変更、それは：

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

が、それは単なる警告であっても、コンソールにエラーでそれを見つけ、それはまだ台無し

Answer 1

この行は、あなたの問題であり、グリッドがレンダリング不可能になるようにする