私は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フォルダに含まれています。
私のプロジェクトでグリッドを実装する正しい方法を探しています。
ご迷惑をおかけして申し訳ございません。 ありがとう!