2

私は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フォルダに含まれています。

私のプロジェクトでグリッドを実装する正しい方法を探しています。

ご迷惑をおかけして申し訳ございません。 ありがとう!

答えて

1

現時点では、すぐれた解決策はありません。 Reactラッパーの作成時には、最も一般的なNodeボイラープレートがjQuery、jQuery UI、したがってIgnite UIで動作するさまざまな問題を抱えていたため、スクリプトタグを実行することがほとんどでした。 Webpackの場合、ProvidePluginを使用してこれらのほとんどを回避することができますが、create-react-appのものは設定を公開しません。私たちはIgnite UIとそのようなアプリでReactラッパーを使用できるようにすることが重要な機能であることを認識しており、現時点で最優先で取り組んでいます。

私たちのGitHubレポの開発に従ってください。

関連する問題