Question

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

我制作了一个非常简单的组件，可能有最基本的网格，我收到错误：

未捕获错误：元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：object。检查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

这不是React特有的东西，而是ES6的东西：p。

因此在ES6中有两种导出方式。第一个是默认导出，其编写如下：

export default someVariable

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

import someVariable from '<path>'

这里的问题是您甚至可以使用其他名称导入变量。因此，

import someVariable2 from '<path>'

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

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

export somevariable

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

import {someVariable} from '<path>'

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

因此，将使用命名导出导出AgGridReact组件。这就是你需要放置{}的原因。

Answer 2

哇我找到了......

我需要改变

import AgGridReact from 'ag-grid-react';

到

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

任何React专家都可以解释其中的差异吗？ O_O

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

2 个答案: