使用create-react-app生成react-data-grid项目失败求助

嘿，刚看到你的问题，这个报错我当初入门React时也踩过坑，咱们一步步捋清楚问题在哪，然后搞定它：

1. 核心报错原因：React导入方式错误 #

你写的import { React, Component } from 'react';是错的！React是默认导出的模块，不是命名导出，所以正确的导入应该是：

import React, { Component } from 'react';

当你使用JSX语法（比如<ReactDataGrid />）时，底层其实会转换成React.createElement调用，如果React没被正确导入，就会出现undefined is not an object (evaluating 'WEBPACK_IMPORTED_MODULE_0_react ["React"].createElement')这个报错。

2. 其他需要修复的问题 #

除了导入错误，你的代码还有几个小问题会导致后续运行异常：

• 未初始化state却直接调用：你在rowsCount里用了this.state.rows.length，但constructor里根本没定义state，会触发新的报错。
• rowGetter函数不符合要求：rowGetter需要是一个接收行索引的函数，返回对应行的数据，而你传的this.getRows是直接返回整个数组，这不符合组件的要求。
• 空的列和行数据：_columns和_rows都是空数组，就算渲染成功也看不到内容，得加一些示例数据。

修改后的完整代码 #

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._columns = [
      { key: 'id', name: 'ID' },
      { key: 'name', name: '姓名' },
      { key: 'age', name: '年龄' }
    ];
    // 初始化示例行数据
    this._rows = [
      { id: 1, name: '张三', age: 25 },
      { id: 2, name: '李四', age: 30 },
      { id: 3, name: '王五', age: 28 }
    ];
    // 如果需要后续修改数据，推荐用state管理
    // this.state = {
    //   rows: [
    //     { id: 1, name: '张三', age: 25 },
    //     { id: 2, name: '李四', age: 30 },
    //     { id: 3, name: '王五', age: 28 }
    //   ]
    // };
  }

  render() {
    return (
      <ReactDataGrid 
        columns={this._columns} 
        // rowGetter需要接收索引，返回对应行
        rowGetter={i => this._rows[i]} 
        // 直接用_rows的长度即可
        rowsCount={this._rows.length} 
        minHeight={500} 
      />
    );
  }
}

export default App;

额外小建议 #

• 如果你需要后续动态修改表格数据，建议把行数据放到state里，这样修改数据后调用this.setState就能自动触发组件重新渲染。
• 刚接触这些技术栈别着急，先把React的基础（比如组件、state、props、JSX原理）搞明白，再去碰react-data-grid这类组件库，会轻松很多~

内容的提问来源于stack exchange，提问作者Gordon