反応データグリッドを使用してこの例を 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>
);
}
それは正常に動作します。私は何を間違えていますか?エラーメッセージはまったく役に立ちません。