[英]ag-grid with react not working
我在讓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主頁並嘗試使用其示例代碼,但是我一直都這樣。
有任何想法嗎?
這行是你的問題:
{headerName: "#", width: "30px", checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true },
更改為此:
{headerName: "#", width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true },
在控制台的錯誤中發現了它,盡管這只是一個警告,但仍然使網格混亂,無法渲染
問題出在以下部分:
<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。 文件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.