在 React 中使用 IgniteUI 网格组件时出错答案

【问题标题】：Error while using IgniteUI grid components in React在 React 中使用 IgniteUI 网格组件时出错
【发布时间】：2017-03-27 21:19:14
【问题描述】：

我是 React 新手，我正在使用来自 https://github.com/facebookincubator/create-react-app 的入门项目。我正在尝试使用来自https://github.com/IgniteUI/igniteui-react 的 IgniteUI 网格。

我正在尝试在我的 javascript 中使用 <IgGrid /> 标记。

我收到以下错误：

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如下：

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如下：

<!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 文件夹中。

寻找在我的项目中实现网格的正确方法。

感谢任何帮助。谢谢！

【问题讨论】：

标签： reactjs reactive-programming infragistics ignite-ui iggrid

【解决方案1】：

目前没有任何好的开箱即用解决方案。在创建 React 包装器时，我们最关心的是让它们通过脚本标签运行，因为最常见的 Node 样板在使用 jQuery、jQuery UI 和 Ignite UI 时存在各种各样的问题。对于 Webpack，您可以使用 ProvidePlugin 解决其中的大部分问题，但 create-react-app 不会公开配置。我们意识到能够在此类应用程序中使用 Ignite UI 和 React 包装器是一项重要功能，因此我们目前正在高度重视它。

请关注我们GitHub repo 上的开发。

【讨论】：