Reactjs React数据网格显示错误

我的DataGrid组件有问题。我已经安装了react数据网格。代码与reac网格的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;

const列=[
{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}]；
类应用程序扩展了React.Component{
render（）{
返回(
行[i]}
rowsCount={3}
最小高度={150}/>
)
}
}
导出默认应用程序；

我得到：

谢谢大家!

从“React”导入React；
    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);

从“react dom”导入react dom；
从“react数据网格”导入ReactDataGrid；
常量列=[
{key:“id”，name:“id”，可编辑：true}，
{key:“title”，name:“title”，可编辑：true}，
{键：“计数”，名称：“计数”，可编辑：true}
];
常量行=[
{id:0，标题：“row1”，计数：20}，
{id:1，标题：“行1”，计数：40}，
{id:2，标题：“第1行”，计数：60}
];
类应用程序扩展了React.Component{
render（）{
返回(
行[i]}
rowsCount={3}
最小高度={150}
enableCellSelect={true}
/>
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

答案是在上面的代码中，上面的代码正在运行
您实际上不需要降级。问题是css没有被导入。
如果您可以从节点模块导入css，它就会工作。
我的解决办法是我使用了整个css，我们现在可以自行维护css，在需要时进行更改。
导入css，如下所示：

import 'react-data-grid/dist/react-data-grid.css';

应该没问题。
我也无法加载css，我通过包括

import ReactDataGrid from 'react-data-grid/dist/react-data-grid.min.js';

而不是

import ReactDataGrid from 'react-data-grid';

似乎css问题您的代码与文档相同，不需要手动导入样式，因此您可以在浏览器的“网络”选项卡中检查css是否加载，或者您可以重新安装软件包。问题似乎出在我的项目上。我在codesandbox中运行了相同的代码，它工作正常，但在我的项目中它没有：（尝试使用inspect元素并找出问题所在，或者尝试使用分治策略调试问题您好！我降级了react数据网格版本，现在它工作正常了！谢谢！