在React项目中使用Ag-Grid时出错

Question

I am trying to use ag-grid which looks promising along in my React project.

I made a very simple component with the most basic grid possible and I get an error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of UserList

If I remove the <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.users} /> in the render() method, the page displays correctly again.

What could be wrong..?

Here is my component code:

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;

Answer 1

Well this is not a React specific thing, it is rather a ES6 thing :p.

So there are two ways to export in ES6. The first one is a default export which is written like this:

export default someVariable

If you export a variable this way, the you can import it in any other file this way:

import someVariable from '<path>'

The catch here is that you can even import your variable with a different name. Hence,

import someVariable2 from '<path>'

will also give me someVariable. But there is a restriction as well. You can have only one export default in a single file

Now the other way of exporting is the Named Export like this:

export somevariable

In this case, you need to import it this way:

import {someVariable} from '<path>'

In this case, the variable name ca't be changed. You need to import it with the same name which you mentioned while exporting.

So the AgGridReact component would be exported using the Named export. That is why you need to put {} around it.

Answer 2

Wow I found it...

I need to change

import AgGridReact from 'ag-grid-react';

to

import {AgGridReact} from 'ag-grid-react';

Any React expert can explain the difference? O_o