React 프로젝트에서 ag-grid를 사용하는 중 오류가 발생했습니다.

Question

React 프로젝트에서 유망한 ag-grid를 사용하려고합니다.

내가 가장 기본적인 그리드 가능하여 매우 간단한 구성 요소를 만들어 나는 오류 얻을 : 내가 제대로 다시 렌더링() 메서드의 <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.users} /> 페이지 표시를 제거하면

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

합니다.

무엇이 잘못 될 수 있습니까? 나는 상관 전문가 반작용

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

이것은 React 고유의 것이 아니며 오히려 ES6 일입니다.

따라서 ES6에서 내보내는 데는 두 가지 방법이 있습니다. 첫 번째는 다음과 같이 작성된 기본 내보내기입니다 :

export default someVariable 

당신이 변수 이런 식으로 내보내는 경우, 당신은 다른 파일에이 방법을 가져올 수 있습니다 :

import someVariable from '<path>' 

변수를 다른 이름으로 가져올 수도 있습니다. 따라서,

import someVariable2 from '<path>' 

또한 저에게 someVariable을 줄 것입니다. 그러나 제한도 있습니다. 당신은 이제 수출의 다른 방법은 다음과 같이 수출라는 단일 파일

에 하나 개의 수출 기본을 가질 수있다 :이 경우

export somevariable 

, 당신은이 방법을 가져와야 :

import {someVariable} from '<path>' 

이 경우 변수 이름을 변경할 수 없습니다. 내보내는 동안 언급 한 것과 같은 이름으로 가져와야합니다.

그래서 명명 된 내보내기를 사용하여 AgGridReact 구성 요소를 내보낼 수 있습니다. 그래서 주위에 {}을 써야합니다.