반응이없는 ag-grid는

Question

내 반응 애플 리케이션에서 작동하려면 ag-Grid를 얻는 데 문제가 있습니다. 내가 시도한 것은 무엇이든, 나는 단지 텍스트 만 얻었고 그리드는 보지 못했다. 내가 뭘 놓치고 있는지 모르겠다. 그들은 순간에 아무것도 렌더링하지 않기 때문에 나는 약간의 CSS 파일과 Home.js 및 Cities.js을 포함하지 않았다

/* 
* ---------------------------- 
* 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; 

: 여기 내 코드입니다. 당신이 볼 수 있듯이

, 나는 그리드, 좀 이상한 문자가 표시되지 않습니다 : 이것은 내가 얻을 결과입니다. 나는 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

이 줄 문제입니다 그리드가 언 렌 더워 지도록