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