2017-06-05 38 views
0

我正在使用反應,並且希望在其中一個組件中呈現syncfusion網格。但是,我遇到了網格組件之一的問題。未找到網格組件ej。我嘗試了很多方式導入,但是我沒有成功。有沒有人有這個問題,並找到了解決方案? Error Message使用反應從網格同步導入組件ej的問題

示例代碼:

import React, { Component } from "react"; 
import $ from "jquery"; 
//This import does not find the component (ej) needed to render the grid 
import {ej} from "syncfusion-javascript"; 
//There are scripts in the index.html file to mount the grid according to 
the Syncfusion documentation 

class GridSeries extends Component { 

constructor() { 
    super(); 
    this.menuGrid = this.menuGrid.bind(this); 
} 

//Function responsible for mounting the grid it is called inside my render method 
menuGrid() { 
    $(function() { 
     $("#Grid").ejGrid({ 
      dataSource: teste, 
      allowPaging: true, 
      allowSorting: true, 
      allowGrouping: true, 
      allowFiltering: true, 
      allowReordering: true, 
      allowMultiSorting: true, 
      filterSettings: {filterType: "excel"}, 
      toolbarSettings: {showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.WordExport, ej.Grid.ToolBarItems.PdfExport]}, 
      columns: [ 
       {type: "checkbox", width: 50}, 
       {field: "OrderID", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right}, 
       {field: "CustomerID", headerText: "Customer ID", width: 80}, 
       {field: "EmployeeID", headerText: "Employee ID", width: 75, textAlign: ej.TextAlign.Right}, 
       {field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right}, 
       {field: "OrderDate", headerText: "Order Date", width: 80, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right}, 
       {field: "ShipCity", headerText: "Ship City", width: 110} 
      ], 
      toolbarClick: function (e) { 
       this.exportGrid = this["export"]; 
       if (e.itemName == "Excel Export") { 
        this.exportGrid(window.baseurl + 'api/grid/ExcelExport') 
        e.cancel = true; 
       } else if (e.itemName == "Word Export") { 
        this.exportGrid(window.baseurl + 'api/grid/WordExport') 
        e.cancel = true; 
       } else if (e.itemName == "PDF Export") { 
        this.exportGrid(window.baseurl + 'api/grid/PdfExport') 
        e.cancel = true; 
        document.getElementById('container') 
       } 
      }, 
     }); 
    }); 

    //Test Base 
    var teste = [ 
     {Name: "bruno", City: "Brasilia"}, 
     {Name: "bruno1", City: "Riacho Fundo l"}, 
     {Name: "bruno2", City: "Guára"}, 
     {Name: "bruno3", City: "Cruzeiro"} 
    ]; 
} 
render() { 
    return (
      <div className="content-container-fluid"> 
       <div className="row"> 
        <div className="cols-mple-area"> 
         { this.menuGrid()} 
         <div id="Grid"></div> 
        </div> 
       </div> 
      </div> 
      ); 
    } 
} 

export default GridSeries; 
+1

請試着問你的問題在英國或在[葡萄牙堆棧溢出(https://pt.stackoverflow.com/) – glhrmv

+0

我投票關閉這一問題作爲題外話,因爲它不是英文 - 這是一個**英文網站**,請尊重網站的規則! –

+0

郵政編碼使用示例。 –

回答

0

問題的原因是,你必須加載從節點包中的腳本,我們不能從節點包中的反應組件默認加載需要的腳本。所以,我們建議您使用webpack或browserify技術來實現您的要求。請參閱下面的知識庫文檔。

https://www.syncfusion.com/kb/7547/how-to-bundle-syncfusion-reactjs-components-using-webpack-and-browserify

+0

我使用的體系結構與react鏈接提供的腳本不同。我不使用webpack配置文件。 webpack設置是隱含的。我使用的架構將乾燥這個前提: https://www.npmjs.com/package/react-scripts –

+0

使用SyncFusion獲得React的文檔相當混亂。我仍然在處理您描述的相同問題。我還沒有找到解決方案。 – Derek