在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

如果我删除的渲染（）方法<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'; 

任何专家作出反应能解释不同之处吗？ O_o

Answer 2

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

所以在ES6中有两种导出方式。第一个是默认出口它是这样写的：

export default someVariable 

如果导出一个变量这种方式，你可以用这种方式将其导入任何其他文件：

import someVariable from '<path>' 

的在这里抓住的是，你甚至可以用一个不同的名称导入你的变量。因此，

import someVariable2 from '<path>' 

也会给我一些变化。但也有一个限制。 你可以在一个单一的文件

只有一个出口默认现在出口的另一种方法是名为export这样的：

export somevariable 

在这种情况下，你需要输入这种方式：

import {someVariable} from '<path>' 

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

所以AgGridReact组件将使用命名导出来导出。这就是为什么你需要在它周围放置{}。