在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組件將使用命名導出來導出。這就是爲什麼你需要在它周圍放置{}。