4

我正在尝试使用反应数据网格将此示例复制到我的 Typescript 项目中。我创建了以下类以匹配提供的类....

import * as React from "react";
import ReactDataGrid from "react-data-grid";
interface PxGridProps {}
interface PxGridState {}
export default class PxGrid extends React.Component<PxGridProps, PxGridState>{
    private _columns;
    private _rows;
    constructor(props) {
        super(props);
        this.props = props;
        this.createRows();
        this._columns = [
            { key: 'id', name: 'ID' },
            { key: 'title', name: 'Title' },
            { key: 'count', name: 'Count' } ];
        return null;
    }

    createRows() {
        let rows = [];
        for (let i = 1; i < 1000; i++) {
            rows.push({
                id: i,
                title: 'Title ' + i,
                count: i * 1000
            });
        }

        this._rows = rows;
    }

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

    render() {
        return  (
            <ReactDataGrid
                minHeight={500}
                columns={this._columns}
                rowGetter={this.rowGetter.bind(this)}
                rowsCount={this._rows.length}
                 />
        );
    }
}

但是当我尝试运行它时，我得到了

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查PxGrid.

如果我将渲染替换为这样的东西......

render() {
        return  (
            <h1> Thing </h1>
        );
}

它工作正常。我怎么了？错误消息根本没有帮助。

4

2 回答 2

3

这是导入的问题。不知道是什么原因造成的，但是当我有import ReactDataGrid from "react-data-grid";并调试时

render() {
    return  (
        <ReactDataGrid
            minHeight={500}
            columns={this._columns}
            rowGetter={this.rowGetter.bind(this)}
            rowsCount={this._rows.length}
             />
    );
}

我看到 ReactDataGrid 是未定义的。出于某种原因，我需要将导入更改为...

import * as ReactDataGrid from "react-data-grid";

一切都开始正常了。

于 2017-03-03T18:48:50.473 回答
0

对打字稿不太了解，请检查此工作代码并进行更改，它也应该适用于您的情况：

class Example extends React.Component{
  constructor() {
    super();
    this._columns = [
      { key: 'id', name: 'ID' },
      { key: 'title', name: 'Title' },
      { key: 'count', name: 'Count' } ];
    this._rows = this.createRows();   
  }
  
  createRows() {
    let rows = [];
    for (let i = 1; i < 1000; i++) {
      rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 1000
      });
    }
    return rows;
  }

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

  render() {
    return  (
      <ReactDataGrid
        columns={this._columns}
        rowGetter={this.rowGetter.bind(this)}
        rowsCount={this._rows.length}
        minHeight={500} />);
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script type="text/javascript" src="https://npmcdn.com/react-data-grid/dist/react-data-grid.min.js"></script>

<div id='container'/>

于 2017-03-03T17:12:58.570 回答