javascript - 我的第一个示例表使用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. 刷新网址。 (可选)

这对我有用。