React数据网格显示错误
React数据网格显示错误
提问于 2020-02-14 01:11:30
我有一个关于ReactDataGrid组件的问题。我已经安装了react-data-grid。代码与reac grid的web中的代码相同：
const columns = [
{ key: 'id', name: 'ID' },
{ key: 'title', name: 'Title' },
{ key: 'count', name: 'Count' }];
const rows = [{ id: 0, title: 'row1', count: 20 }, { id: 1, title: 'row1', count: 40 }, { id: 2, title: 'row1', count: 60 }];
class App extends React.Component {
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150} />
)
}
}
export default App;我得到的是：Result
谢谢!
回答 4
Stack Overflow用户
发布于 2020-02-27 20:25:35
如下所示导入CSS：
import 'react-data-grid/dist/react-data-grid.css';应该没问题。
Stack Overflow用户
发布于 2020-02-14 02:10:48
import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
const columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "count", name: "Count", editable: true }
];
const rows = [
{ id: 0, title: "row1", count: 20 },
{ id: 1, title: "row1", count: 40 },
{ id: 2, title: "row1", count: 60 }
];
class App extends React.Component {
render() {
return (
<ReactDataGrid
columns={columns}
rowGetter={i => rows[i]}
rowsCount={3}
minHeight={150}
enableCellSelect={true}
/>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);https://codesandbox.io/s/rdg-cell-editing-h8bnr
答案是在上面的代码中，上面的代码是有效的
Stack Overflow用户
发布于 2020-02-19 15:42:28
你真的不需要降级。问题是没有导入css。如果你能从node-modules导入css，它就能工作。对我来说，解决办法是我采用了整个css，我们现在可以自我维护css，在需要的时候进行更改。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60213221
复制相关文章
相似问题
腾讯云开发者
