React Data Grid 显示不好答案

【问题标题】：React Data Grid shows badReact Data Grid 显示不好
【发布时间】：2023-03-18 22:05:02
【问题描述】：

我对 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

谢谢！

【问题讨论】：

好像是css问题
你的代码和docs一样，不需要手动导入style，所以你可以在浏览器的network选项卡中检查css是否加载或者你可以重新安装包。

标签： reactjs grid react-data-grid

【解决方案1】：

像这样导入 CSS：

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

应该没问题。

【讨论】：

【解决方案2】：

    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

答案在上面的代码中，上面的代码正在运行

【讨论】：

看来问题出在我的项目上。我在代码和框中运行相同的代码，它工作正常，但在我的项目中它没有:(
尝试使用检查元素并找出问题所在
或者尝试使用分而治之的策略来调试这个东西
你好！我降级了 react-data-grid 版本，现在它工作正常！谢谢！

【解决方案3】：

您真的不需要降级。问题是没有导入css。如果您可以从节点模块导入 css，它将起作用。对我来说，解决方法是我使用了整个 css，我们现在可以自行维护 css，并在需要时进行更改。

【讨论】：

【解决方案4】：

我也无法加载 css，我通过包含解决了这个问题

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

而不是

import ReactDataGrid from 'react-data-grid';

【讨论】：