2

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

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

我收到以下错误：

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 脚本包含在项目的脚本文件夹中。

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

任何帮助表示赞赏。谢谢！

4

1 回答 1

1

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

请关注我们GitHub存储库上的开发。

于 2017-04-07T13:50:58.077 回答