Gettting React.createElement：類型無效 - 期望一個字符串...但得到：undefined

Question

我想將this example使用反應數據網格複製到我的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> 
     ); 
} 

它工作正常。我錯了什麼？錯誤消息根本沒有幫助。

Answer 1

不知道太多關於打字稿，檢查該工作代碼和做的修改，應該在你的情況下，也工作：

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

這是進口的問題。不知道是什麼導致它，但是當我有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";

所有的一切都開始正常工作。