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

Question

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

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

输出：

ID 标题 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 不起作用。这是对我有用的快速解决方案：

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

这对我有用。