2017-03-03 113 views
3

我想将this example使用反应数据网格复制到我的Typescript项目中。我创建了下面的类来匹配提供的一个....Gettting React.createElement:类型无效 - 期望一个字符串...但得到:undefined

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

它工作正常。我错了什么?错误消息根本没有帮助。

+0

您的导入是否真的有效?你'npm安装'? –

+0

是的,谢谢你,我真的想通了,我会发布答案。 – Jackie

回答

0

不知道太多关于打字稿,检查该工作代码和做的修改,应该在你的情况下,也工作:

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

+0

代码实际上是确定的,这是一个导入问题。谢谢你! – Jackie

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";

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

+1

用'*'导入时,所有导出的函数都会导入到文件中(在您的情况下可能不需要)。如果没有默认导出,简单'import ReactDataGrid ...'不起作用。所以,如果你只想导入'ReactDataGrid',你可以通过编写'react-data-grid''导入{ReactDataGrid}来完成。 –

+0

我试过了,它不起作用。当我从'react-data-grid''导入{ReactDataGrid}时,它返回undefined,但是将'import *作为ReactDataGrid从“react-data-grid”中返回;'返回了正确的功能 – Jackie

+1

这意味着导出的函数名称不同(不是'ReactDataGrid')。但是,由于您导入所有函数('*')并将其别名创建为“ReactDataGrid”,这意味着只有一个函数,所以您的方法没问题。请记住,如果添加更多方法,这可能会破坏您的应用程序。您可以检查源代码以查看组件的名称,以便只导入该组件。虽然有趣的情况! –

相关问题