Gettting React.createElement：type无效 - 期望一个字符串......但得到：undefined

Question

I am trying to copy this example using react data grid into my Typescript project. I created the following class to match the one provided....

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}
                 />
        );
    }
}

But when I try to run it I get

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of PxGrid .

If I replace out the render to something like this....

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

It works fine. What am I getting wrong? The error message is not helping at all.

Answer 1

This was an issue importing. Not sure what was causing it but when I have import ReactDataGrid from "react-data-grid"; and debug on

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

I see ReactDataGrid is undefined. For some reason I needed to change my import to...

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

And everything started working fine.

Answer 2

Don't know much about the typescript, check this working code and do the changes, it should work in your case also:

 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'/>