React에서 IgniteUI 그리드 구성 요소를 사용하는 동안 오류가 발생했습니다.

React를 처음 사용했으며 https://github.com/facebookincubator/create-react-app에서 시작 프로젝트를 사용하고 있습니다. https://github.com/IgniteUI/igniteui-react에서 IgniteUI 그리드를 사용하려고합니다.React에서 IgniteUI 그리드 구성 요소를 사용하는 동안 오류가 발생했습니다.

내 자바 스크립트에 <IgGrid /> 태그를 사용하려고합니다. 다음과 같이

import '../scripts/ignite-react.js' 
import IgGrid from '../scripts/igniteui-react.min.js'; 
import React from 'react'; 


class UIGrid extends React.Component{ 
render(){ 
return(
<div id="uigrid"> 
<h2> Play </h2> 
<IgGrid /> 
</div> 

); 
} 
} 

export default UIGrid;

된 index.html은 다음과 같습니다 :

난 다음받을 오류 다음과 같이

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in. Check the render method of `UIGrid`. 
    at invariant (invariant.js:44) 
    at instantiateReactComponent (instantiateReactComponent.js:77) 
    at instantiateChild (ReactChildReconciler.js:44) 
    at ReactChildReconciler.js:71 
    at traverseAllChildrenImpl (traverseAllChildren.js:77) 
    at traverseAllChildrenImpl (traverseAllChildren.js:93) 
    at traverseAllChildren (traverseAllChildren.js:172) 
    at Object.instantiateChildren (ReactChildReconciler.js:70) 
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187) 
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)

UIGrid.js 코드를 호출하기 위해 사용입니다

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div>  
    </body> 
</html>

index.js는 다음과 같습니다 :

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import UIGrid from './components/grid/UIGrid' 
import './index.css'; 

ReactDOM.render(
    <UIGrid />, 
    document.getElementById('root') 
);

igniteui-react.min.js 스크립트는 프로젝트의 scripts 폴더에 포함되어 있습니다.

내 프로젝트에서 그리드를 구현하는 올바른 방법을 찾고 있습니다.

도움을 주시면 감사하겠습니다. 감사합니다.

출처

2017-03-27 howard roark

현재로서는이 솔루션을위한 최적의 해결책은 없습니다. React wrapper를 만들 때 우리는 Script 태그를 통해 가장 일반적인 Node 보일러 플레이트가 jQuery, jQuery UI, 따라서 Ignite UI와 함께 작동하는 다양한 문제를 가지고 있다고 생각했습니다. Webpack의 경우 ProvidePlugin을 사용하여 대부분 해결할 수 있지만 create-react-app 명령은 구성을 노출하지 않습니다. 우리는 Ignite UI와 React wrapper를 이러한 응용 프로그램에서 사용할 수있게하는 것이 중요한 기능이라는 것을 알고 있습니다. 그래서 우리는 그 순간에 우선 순위를 가지고 작업하고 있습니다.

Google GitHub 리포에 대한 개발을 따르십시오.

출처

2017-04-07 13:50:58

React에서 IgniteUI 그리드 구성 요소를 사용하는 동안 오류가 발생했습니다.

답변

관련 문제