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 AgGridReact from 'ag-grid-react'; 

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

に変更する必要が

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

うわー、私はそれを見つけた...

：ここ

は私のコンポーネントのコードです違いを説明できますか？ O_o

Answer 2

これはリアクション固有のものではなく、むしろES6のものです。

したがって、ES6でエクスポートするには2通りの方法があります。

export default someVariable 

あなたがこの方法を、変数をエクスポートする場合は、あなたが他のファイルでは、この方法でそれをインポートすることができます：

import someVariable from '<path>' 

最初のものは、次のように書かれているデフォルトのエクスポートです変数を別の名前でインポートすることもできます。したがって、

import someVariable2 from '<path>' 

私もsomeVariableを与えます。しかし、制限もあります。 あなたは今、エクスポートする他の方法は次のようにエクスポート名前ある単一のファイル

で唯一の輸出のデフォルトを持つことができます。この場合

export somevariable 

、あなたはそれをこのようにインポートする必要があります：

import {someVariable} from '<path>' 

この場合、変数名は変更できません。エクスポート中に言及したのと同じ名前でインポートする必要があります。

したがって、AgGridReactコンポーネントは、名前付きエクスポートを使用してエクスポートされます。だからこそ{}を置く必要があります。