使用 create-react-app 生成反应数据网格失败

Question

我是当今技术的新手，但我打算将 react-data-grid 用于一个宠物项目。

试图理解 git、npm、react、react-data-grid、babel、webpack、javascript 及其变体...所以我想我会尝试使用 create-react-app[= 生成我的第一个简单的 react-data-grid 应用程序36=] 来自 Facebook。

我在渲染过程中出现以下错误，我卡住了：

TypeError: undefined is not an object (evaluating 'WEBPACK_IMPORTED_MODULE_0_react["React"].createElement')

我下面的简单 app.js 改编自 create-react-app 生成的模板。

import { React, Component } from 'react'; import { ReactDataGrid } from 'react-data-grid'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(props, context) { super(props, context); this._rows = []; this._columns = []; } getRows () {return this._rows;} render() { return ( <ReactDataGrid columns={this._columns} rowGetter={this.getRows} rowsCount={this.state.rows.length} minHeight={500} /> ); } } export default App;

我正在使用：

反应数据网格 3.0.6

反应 16.2.0

npm 5.6

Answer 1

很多问题。首先，您导入 ReactDataGrid 的方式必须没有括号。其次，在组件的实例化中，您调用未定义的 this.state，而必须调用您已定义的内容：this._rows。我还必须安装 create-react-class 包才能使一切正常，可能是因为 react-data-grid 需要它。当某些包不使用 ES6 时，需要 create-react-class 包。

import React from 'react';
import ReactDataGrid from 'react-data-grid';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this._rows = [];
    this._columns = [];
  }

  getRows () {
      return this._rows;
  }

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

export default App;

使用 create-react-app 生成反应数据网格失败

Failed react-data-grid generation using create-react-app

javascript

reactjs

create-react-app

react-data-grid