Question

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

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

感谢任何帮助。谢谢！

Answer 1

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

请按照我们的GitHub回购

进行开发

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

1 个答案: