Reactjs 在React项目中使用ag网格时出错

我正在尝试使用ag网格，它在我的React项目中看起来很有前途

我用最基本的网格制作了一个非常简单的组件，但出现了一个错误：

未捕获错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查

UserList

如果删除render（）方法中的

，页面将再次正确显示

有什么不对劲吗

以下是我的组件代码：

import React from 'react';
import ReactDOM from 'react-dom';

import AgGridReact from 'ag-grid-react';

$ = window.$ = window.jQuery = require('jquery');

var UserList = React.createClass({
    getInitialState: function () {
        return {
            showGrid: true,
            users: [],
            columnDefs: []
        };
    },

    getDefaultProps: function () {
        return {
        };
    },

    componentDidMount: function () {
        var self = this;
        // $.ajax({
        //     url: 'http://localhost:55010/api/v1/User',
        //     type: 'GET',
        //     data: null,
        //     contentType: "application/json; charset=utf-8",
        //     dataType: "json",
        //     success: function (data) {
        //         self.setState({ users: data });
        //     },
        //     error: function (jqXHR, b, c) {
        //     }
        // });
    },

    componentWillUnmount: function () {
    },

    // onShowGrid: function(show) {
    //     this.setState({
    //         showGrid: show
    //     });
    // },

    // onGridReady: function(params) {
    //     this.api = params.api;
    //     this.columnApi = params.columnApi;
    // },

    render: function () {
        return (
            <div>
                <h1>UserList</h1>

                <ul>
                    {this.state.users.map(function(u) {
                        return (
                        <li key={'u'+u.Id}>
                            {u.Id}, {u.Username}, {u.Email}  
                        </li>
                        );
                    })}
                </ul>

                <div style={{width: '800px'}}>
                    <div style={{padding: '4px'}}>
                        <div style={{height: 400}} className="ag-fresh">
                            <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.users} />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

module.exports = UserList;

从“React”导入React；
从“react dom”导入react dom；
从“ag grid react”导入AgGridReact；
$=window.$=window.jQuery=require（'jQuery'）；
var UserList=React.createClass({
getInitialState:函数（）{
返回{
没错，
用户：[]，
columnDefs:[]
};
},
getDefaultProps:函数（）{
返回{
};
},
componentDidMount:函数（）{
var self=这个；
//$.ajax({
//网址：'http://localhost:55010/api/v1/User',
//键入：“GET”，
//数据：空，
//contentType:“应用程序/json；字符集=utf-8”，
//数据类型：“json”，
//成功：功能（数据）{
//self.setState（{users:data}）；
//     },
//错误：函数（jqXHR，b，c）{
//     }
// });
},
componentWillUnmount:函数（）{
},
//onShowGrid：功能（显示）{
//这是我的国家({
//showGrid:show
//     });
// },
//onGridReady:函数（参数）{
//this.api=params.api；
//this.columnApi=params.columnApi；
// },
渲染：函数（）{
返回(
用户列表

{this.state.users.map（函数（u）{
返回(

{u.Id}，{u.Username}，{u.Email}

);
})}

);
}
});
module.exports=用户列表；

哇，我找到了

我需要换衣服

import AgGridReact from 'ag-grid-react';

到

---

有哪位专家能解释这种差异？O_O

这不是一个特定于React的东西，而是一个ES6的东西：p

因此，在ES6中有两种导出方法。第一个是默认导出，如下所示：

export default someVariable

export somevariable

如果以这种方式导出变量，则可以通过以下方式将其导入任何其他文件：

import someVariable from '<path>'

import {someVariable} from '<path>'

在这种情况下，您需要通过以下方式导入：

import someVariable from '<path>'

import {someVariable} from '<path>'

从“”导入{someVariable}

在这种情况下，变量名不能更改。您需要使用导出时提到的相同名称导入它

因此，AgGridReact组件将使用命名的导出进行导出。这就是为什么你需要把{}放在它周围