Gettting React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge ... aber ich habe: undefined

Question

Ich versuche zu kopieren, indem ich react data grid in mein Typescript-Projekt verwende. Ich habe die folgende Klasse, die man zur Verfügung gestellt passen ....

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

Aber wenn ich versuche es ich

Warnung erhalten zu laufen: React.createElement: Typ ist ungültig - erwartet ein String (für eingebaute Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: undefiniert. Wahrscheinlich haben Sie vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist. Überprüfen Sie die Rendermethode PxGrid.

Wenn ich das machen, so etwas wie diese ersetzen out ....

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

Es funktioniert gut. Was mache ich falsch? Die Fehlermeldung hilft überhaupt nicht.

Answer 1

Sie wissen viel über das Typoskript nicht, lesen Sie in diesem Arbeits Code und tun die Änderungen, sollte es auch in Ihrem Fall:

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

Answer 2

Dies war den Import ein Problem. Nicht sicher, was es verursacht wurde, aber wenn ich import ReactDataGrid from "react-data-grid"; und Debug auf

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

Ich sehe ReactDataGrid nicht definiert ist. Aus irgendeinem Grund musste ich meine Import ändern ...

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

Und alles begann fein arbeiten.