我的第一个示例 table 使用 react-data-grid，列不会彼此相邻呈现，而是彼此重叠

Question

这是我使用 react-data-grid 的第一个示例 table，列不会彼此相邻呈现，而是彼此重叠

下面是我正在尝试的非常基本的示例代码。该代码使用数据呈现 table，但将列和数据呈现在彼此之上，如下所示：

输出：

编号标题 1个任务 2个任务

import React from 'react';
import DataGrid from 'react-data-grid';

export default class extends React.Component {
  constructor(props, context) {
    super(props, context);
    this._columns = [
      {
        key: 'id',
        name: 'ID',
        resizable: true,
        width: 40
      },
      {
        key: 'task',
        name: 'Title',
        resizable: true
      }
    ];
    this.createRows();
    this.state = null;
  }

  createRows = () => {
    const rows = [];
    for (let i = 1; i <= 2; i++) {
      rows.push({
        id: i,
        task: 'Task'
      });
    }

    this._rows = rows;
  };

  rowGetter = (i) => {
    return this._rows[i];
  };

  render() {
    return (
        <DataGrid
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this._rows.length}
            minHeight={500}
            minColumnWidth={120}

        />
    );
  }
}

Answer 1

这是因为 css 不工作。这是对我有用的快速解决方案：

转到资源管理器 <project-name>\node_modules\react-data-grid\dist 中的路径并打开 react-data-grid.css 文件。
复制完整的 css 代码并将其粘贴到您的 <project-name>\src\App.css 文件中。
刷新URL。（可选）

这对我有用。

Answer 2

Sam 问题在这里，我的所有文本都出现在彼此之上，即使我可以突出显示空网格并使用箭头键在它们之间导航。

我的解决方案与 Akanksha 的类似，但我只是复制了整个

node_modules\react-data-grid\dist\react-data-grid.css

文件到与我的 App.css 相同的级别，并在使用 react-data-grid 的组件中直接链接到它。

import 'react-data-grid.css';

希望在需要时保持加载大小，并防止它在我没有预料到的时候影响其他类而导致任何奇怪的错误。

Answer 3

您需要导入 react-data-grid 的 CSS。通常它位于文件夹中： node_modules\react-data-grid\dist。安装包后找到此 CSS 文件的实际位置。如果 CSS 文件位于我提到的文件夹中，只需将其导入您的 js 文件即可：

import React from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';

应该可以。

我的第一个示例 table 使用 react-data-grid，列不会彼此相邻呈现，而是彼此重叠

My first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other

javascript

reactjs

react-data-grid