在 React 项目中使用 ag-grid 时出错

Question

我正在尝试在我的 React 项目中使用看起来很有前途的 ag-grid。

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

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

如果我删除 render() 方法中的 <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.users} />，页面将再次正确显示。

有什么问题..?

这是我的组件代码：

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

哇我找到了...

我需要改变

import AgGridReact from 'ag-grid-react';

至

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

有 React 专家能解释一下区别吗？ O_o

Answer 2

嗯，这不是 React 特有的东西，而是 ES6 的东西 :p.

所以在ES6中导出有两种方式。第一个是 default export 是这样写的：

export default someVariable

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

import someVariable from '<path>'

这里要注意的是，您甚至可以使用不同的名称导入变量。因此，

import someVariable2 from '<path>'

也会给我一些变量。但也有一个限制。 一个文件中只能有一个导出默认值

现在另一种导出方式是 命名导出，如下所示：

export somevariable

这种情况下，需要这样导入：

import {someVariable} from '<path>'

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

因此将使用命名导出导出 AgGridReact 组件。这就是为什么您需要在其周围放置 {}。

在 React 项目中使用 ag-grid 时出错

Error using ag-grid in a React project

reactjs

ag-grid